animation

animation一般是与 @keyframes一起用，来制作网页动画。
但animation有很多参数，每种参数对应的属性有不同含义。
参数类型如下：
animation-name ：检索或设置对象所应用的动画名称
animation-duration ：检索或设置对象动画的持续时间
animation-timing-function ：检索或设置对象动画的过渡类型
animation-delay ：检索或设置对象动画延迟的时间
animation-iteration-count ：检索或设置对象动画的循环次数
animation-direction ：检索或设置对象动画在循环中是否反向运动
animation-fill-mode ：检索或设置对象动画时间之外的状态
animation-play-state ：检索或设置对象动画的状态。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        @keyframes move {
 
            0%{transform: rotate(0)}
            100%{transform: rotate(360deg)}
        }

        #div1{width: 100px;height: 300px;margin: 100px auto 0;background: lightcoral;
        animation:move 2s linear 5s infinite}

    style>
head>
<body>
<div id="div1">div>
body>
html>

代码说明  move为animation-name      infinite为animation-iteration-count 

                 2s为animation-duration      5s为animation-delay

相关

标签