动画

1年前 (2021-08-31) 1017次浏览 已收录 1个评论

动画常见属性

属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了animation-play-state属性。
animation-name 规定@keyframes动画的名称。(必须的
animation-duration 规定动画完成一个周期所花费的秒或毫秒,默认是0。(必须的
animation-timing-function 规定动画的速度曲线,默认是“ease”。
animation-delay 规定动画何时开始,默认是0。
animation-iteration-count 规定动画被播放的次数,默认是1,还有infinite(无限)
animation-direction 规定动画是否在下一周期逆向播放,默认是“normal“,alternate逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是”running”,还有”paused”。
animation-fill-mode 规定动画结束后状态,保持结束状态forwards、回到起始状态backwards
/* animation:动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态
并且动画可以叠加,用逗号分隔*/

animation: myfirst 5s linear 2s infinite alternate;

速度曲线

描述
linear 动画从头到尾的速度是相同的。匀速
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
steps() 指定了时间函数中的间隔数量(步长)

步骤

制作动画分两步

  1. 先定义动画
  2. 再使用动画

定义动画语法:

@keyframes 动画名称{
开始状态
    0%{
        width:100px;
    }
结束状态
    100%{
        width:200px;
    }
}

使用动画语法:

animation-name:动画名称;
animation-duration:持续时间;

测试:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        @keyframes name{
            0%{
                transform: translate(0px);/*可以省略*/ 
            }
            100%{
                transform: translate(1000px,0px);
            }
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: name;
            animation-duration: 2s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
结果演示

特点:

  • from和tu相当于0%和100%
  • 可以改变任意多的样式以及任意多的次数

动画序列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        @keyframes name{
            0%{

                transform: translate(0px);
            }
            25%{
                transform: translate(1000px,0px);
            }
            50%{
                transform: translate(1000px,500px);
            }
            75%{
                transform: translate(0px,500px);
            }
            100%{
                transform: translate(0px,0px);
            }

        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            animation-name: name;
            animation-duration: 3s;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:动画
喜欢 (2)

您必须 登录 才能发表评论!

(1)个小伙伴在吐槽
  1. 匀速速度曲线:linear
    厚积薄发2021-08-31 18:48