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>Title</title>
    <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

posted @ 2021-11-21 22:17  孤傲白狼  阅读(420)  评论(0)    收藏  举报