CSS3中的animation动画属性简介

144
作者 饥人谷_大春
2017.01.08 15:15 字数 1497

在CSS3中,有一个新的属性可以用来做一些简单的动画效果,这就是animation,中文意思就是动画。

一、首先我们来看看animation属性的兼容性(来源caniuse


animation属性兼容

二、animation使用的简单例子

在这个例子中,我让一个从左移动到右,再移动回左边:
代码如下:


div移动

实验地址

三、讲讲@keyframes动画的创建

  • 介绍
    在使用animation为元素制作动画时,先要制定想要的动画效果,例如让div元素移动,又或者改变它的背景色,实现翻转效果等,这时候就要用到@keyframes为其创建动画的效果;

  • @keyframes的写法
    总的格式如下:

    @keyframes 动画的名字{

            这里制定元素变化的效果

    }

  • @keyframes的几个关键词
    1.fromto,标记元素的起始状态和结束状态,例如下面例子,元素的起始背景色是红色,使其慢慢变成蓝色就可以这样写;


    from和to


    2.此外,状态变化也可以用百分比进行标识,添加动画在每个进度时的效果;


    百分比表示动画效果进度

PS:在 @keyframes中填写动画效果,结束是不能添加分号;的,否则没有效果,下面这个是错误的写法:


错误写法

这里介绍animation的七大属性

一、animation-duration属性(持续时间)

  • 介绍
    animation-duration是为动画制定持续的时间,一般以秒或者毫秒来计算,如果不填写该属性,则默认为0,没有动画效果;

  • 写法:


二、animation-timing-function属性(时间曲线)

  • 介绍
    animation-timing-function属性是为动画制定从开始到结束时的播放速度曲线,比如由快到慢,或者由慢到快等;

  • animation-timing-function的几个值
    1.linear:表示动画一直以匀速进行播放;贝赛尔函数cubic-bezier(0,0,0.25,1)
    2.ease:默认值,表示动画先慢后快,在即将结束时再变慢;cubic-bezier(0.25,0.1,0.25,1)
    3.ease-in:动画由慢到快直至结束;cubic-bezier(0.42,0,1,1)
    4.ease-out:动画由快到慢直至结束;cubic-bezier(0,0,0.58,1)
    5.ease-in-out:动画由慢到快再到慢直至结束,与ease不同的是它均等得分为三份,而ease是只在结束时变慢;cubic-bezier(0.42,0,0.58,1)
    6.标注时间:也可以直接标注一个时间(以s做单位)来规定动画全称以该速度进行播放;
    7.贝赛尔函数:也可以使用贝赛尔函数来对动画的播放时间曲线进行规定;
    关于贝赛尔函数点这里
    这里是五个不同动画之间的效果对比:
    效果对比

  • animation-timing-function写法


    animation-timing-function

三、animation-delay属性(动画延迟时间)

  • 介绍
    delay顾名思义是延迟的意思,该属性作用就是规定动画延迟多少时间进行播放的,以秒或者毫秒做单位,默认值为0,可以设置负数,设置负数时候,动画直接跳过负数时间段进行执行,例如:动画只有5s,设置该属性的值为-2s的时候,动画是直接从第三秒的位置开始的;

  • animation-delay负值与正值的对比
    实验地址

  • animation-delay写法


    animation-delay写法

四、animation-iteration-count属性(动画播放次数)

  • 介绍
    iteration-count这个连接词中,iteration的意思是反复,count的意思是次数。该属性制定动画的播放次数,默认是1,也就是播放一次,填写数字几就是播放几次,此外,还有值infinite是无限循环的意思;

  • animation-iteration-count写法


    动画播放次数

五、animation-direction属性(动画反向播放)

  • 介绍
    该属性中,direction是方向的意思,该属性制定动画是否反方向播放,以及怎么样进行播放;

  • animation-direction的四个值
    1.normal:默认值,不进行反方向播放;
    2.reverse:全部播放都是用反方向播放;
    3.alternate:在奇数次数(1、3、5)的时候正向播放,偶数次数(2、4、6)进行反向播放;
    4.alternate-reverse:在偶数次数(1、3、5)的时候正向播放,奇数次数(2、4、6)进行反向播放;

四个值的播放对比

  • animation-direction的写法

animation-direction写法

六、animation-fill-mode属性(动画保持开始或者结束时的样式)

  • 介绍
    animation-fill-mode属性制定动画是否保持开始时的样式,或者是结束时的样式,又或者两者皆有,比如在一次播放结束后,动画保持什么样的样式;

  • animation-fill-mode属性的三个值
    1.forwards:动画结束后保持结束时的样式;
    2.backwards:动画结束后保持开始时的样式;
    3.both:两者皆有;

三个值之间的对比

七、animation-play-state属性(暂停动画)

  • 介绍
    animation-play-state属性制定动画的运行状态,是运行还是暂停;

  • animation-play-state属性的两个值
    1.paused:动画暂停;
    2.running:动画运行;

  • 例子:点击按钮暂停动画或开始动画
    暂停或运行动画


最后说说animation的简写形式

格式如下:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;


animation属性简写

随便做做也感觉很漂亮

文章著作权归饥人谷_大春和饥人谷所有,转载须说明来源

CSS3