css3动画

Posted 2021-04-09 夕水

css3动画与css3转换的区别就是它不一定需要事件的激活就能够自动的执行,在css3中执行动画的属性是animation.该属性其实也是一个简写属性,也有几个分支属性.而要创建动画就需要@keyframes规则,关于css动画的兼容性如下图:

要让动画产生效果,就必须要有动画名和动画执行时间,然后就是关键帧的设置也就是@keyframes规则.动画名和动画执行时间也就是动画的分支属性之一.

@keyframes规则:结构如下:

@keyframes 动画名称{

    //css关键帧写法

}

关键帧写法有两种,第一种是英文单词,第二种是百分数.

英文单词只有from和to两个单词,from表示开始,to表示结束.而百分数则是0%~100%,期间可以是多个百分数,如30%,50%等,0%就相当于from,表示开始,100%就相当于to,表示结束.

两种写法结构如图所示:

当然,为了保证兼容性,这个规则在某些特定情况下还是需要加上浏览器前缀的,比如谷歌浏览器就要写成-webkit-@keyframes,火狐浏览器就要写成-moz-@keyframes.

width就是动画名称,表示宽度的改变,让动画更加语义化,使人一目了然,就知道动画是干什么的.

animation-name:动画名称,如上图的width.

animation-duration:动画执行时间,常用单位是秒s或者毫秒ms.默认值是0.

以上两个属性是创建一个动画的必须条件.

animation-timing-function:动画的执行速度曲线,其值等同过渡分支属性transition-timing-function的值一样,有六个值,即,逐渐变慢(ease)默认值,匀速(linear),加速(ease-in),减速(ease-out),先加速后减速(ease-in-out),贝塞尔曲线(cubic-bezier).

animation-delay:动画时间的延迟.也同过渡分支属性transition-delay一样.

animation-iteration-count:动画执行次数.可以有以下值:

1(默认值),即动画只执行一次.

number:即任何正整数值.

infinite:无限次数.表示动画无限制的执行,并且永远不会停止.

animation-direction:动画周期逆向运行.也就是将动画反过来执行,关键帧就变成从to(100%)到from(0%)了.属性值如下图所示:

animation-play-state:即动画的播放状态,有两个属性值,如下:

running:即动画播放.

paused:即动画暂停.

animation-fill-mode:如果没有设置该属性值,并且动画的执行次数不是无限次的时候,动画会在播放结束后还原到未播放动画之前的状态,这在一些特定情况下肯定造成不必要的影响,设置该属性就是为了保留动画的最后一帧的执行状态.该属性有以下属性值:

animation有那么多分支属性,我们并不需要一一记住,只需要记住组合值写法就可以了,也就是简写属性animation.按照顺序写法结构应该如:

animation:动画名称 动画执行时间 速度曲线  延迟时间 播放次数 周期逆向播放 播放状态 播放状态保留.

中间用空格隔开.

接下来一个综合示例用以展示动画的用法,也就是将昨天写的3D正方体给扩展一下.由于代码有点多,所以分别截图如下:

运行效果如动图演示:

想要源代码的,可以私聊我哦.嘿嘿,今天就到这里,这还只是css3动画的一部分,关于css3动画还可以做出很多炫酷的效果,后期有时间再展示吧.顺便说一下,明天再补充一下css3的新增知识点,然后后天就会进入javascript的知识总结呢,敬请期待吧.