欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

动画Animation 常用属性

程序员文章站 2022-03-01 20:50:51
...

动画就是由一个个的关键帧组成的。

想实现一个动画的效果,这个时候

1.需要先预设一个动画

@keyframes cc {
/* 动画序列:时间节点 */
/* 开始状态 */
/* 节点设置 */
/* 写CSS属性 */
from {
transform: translateX(0px);
}
/* 结束状态 */
to {
transform: translateX(500px);
}
/* ************************************百分数 */
0% {
/* 节点设置 */
/* 写CSS属性 */
transform: translateX(0px);
}
50% {
transform: translateX(800px);
}
100% {
/* 注意点:节点状态一定是在上一个节点状态上进行 */
transform: translateX(800px) translateY(600px);
}
}

百分比指的是动画耗时(animation-duration)的时间比

2.设置动画属性

先来一个综合写法

animation: name duration timing-function delay iteration-count direction fill-mode;

 其中两个必要的属性就是

1.animation-name:cc;           你用@keyframe设置的动画的名字

2.anmation-duration:3s;      动画耗时

3.animation timing-function :运动速度

         默认属性ease(低速开始,加快,低速结束) linear(匀速运动) ease-in(低速开始)

          ease-out(低速 结束 )ease-in-out 低速开始和结束    steps(n)动画分成n步来完成   

          效果图      http://www.w3school.com.cn/tiy/c.asp?f=css_animation-timing-function 

4.animation-delay :2s; 延迟时间   

5.animation-interation-count:2/infinite(无限次)  动画响应的次数(interation英文意思相互影响)

6.animation-direction:     循环方向   

            默认normal(默认0~100) / alternate(0~100~0)/ reverse(100~0)/

            alternate-reverse(100~0~100)

7.animation-fill-mode      动画等待或者结束时候的状态     

        forwards 初始状态不能立即执行0%的状态,执行动画完成后保留最后状态

        backwards 如在0%时候设置样式,立即执行。动画完成后不会保留最后的结果(有延迟)

        both  既能立即执行设置的样式,也会保留最后的结果。

8.animation-play-state   (不在简写内) 播放和暂停状态    paused暂停     running 播放

 

3.组动画  ,让几个动画同时执行                

 animation: name_1 5s linear,name_2 2s linear     两个动画之间用逗号隔开