【小5聊】CSS3动画属性animation

【语法】

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

/*---以下按个人字面英文理解---*/
animation: 名字 持续时间 定时功能 延迟 迭代计数 方向;

【解释】

name：名字，这个比较好理解，就是自己自定义的一个动图名字。帧状态的名字

dutation：持续时间，完成一个规则帧所用的时间，比如：1s，完成top从-10px到0px的过程

timing-function：速度曲线！

delay：延迟时间，即延迟一定时间才开始执行动画

iteration-count：播放次数，infinite=无线次

direction

值	描述	名称	值
animation-name	规定需要绑定到选择器的 keyframe 名称。。	自定义名称	myname
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。	时间	1s、0.2s等
animation-timing-function	规定动画的速度曲线。	linear	动画从头到尾的速度是相同的。
		ease	默认。动画以低速开始，然后加快，在结束前变慢。
		ease-in	动画以低速开始。
		ease-out	动画以低速结束。
		ease-in-out	动画以低速开始和结束。
animation-delay	规定在动画开始之前的延迟。	time	可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。
animation-iteration-count	规定动画应该播放的次数。	n	定义动画播放次数的数值。
		infinite	规定动画应该无限次播放。
animation-direction	规定是否应该轮流反向播放动画。	normal	默认值。动画应该正常播放。
		alternate	动画应该轮流反向播放。

 【简单使用】

让文字跳动起来，可以设置top值来实现跳动

• 效果

• css代码

<style type="text/css">

    div span {
        float: left;
        position: relative;
    }

        div span:nth-child(1) {
            -webkit-animation: jump 1s linear 0s infinite alternate;
        }

        div span:nth-child(2) {
            -webkit-animation: jump 1s linear 0.2s infinite alternate;
        }

        div span:nth-child(3) {
            -webkit-animation: jump 1s linear 0.4s infinite alternate;
        }

        div span:nth-child(4) {
            -webkit-animation: jump 1s linear 0.6s infinite alternate;
        }

        div span:nth-child(5) {
            -webkit-animation: jump 1s linear 0.8s infinite alternate;
        }

        div span:nth-child(6) {
            -webkit-animation: jump 1s linear 1.0s infinite alternate;
        }

        div span:nth-child(7) {
            -webkit-animation: jump 1s linear 1.2s infinite alternate;
        }

        div span:nth-child(8) {
            -webkit-animation: jump 1s linear 1.4s infinite alternate;
        }

        div span:nth-child(9) {
            -webkit-animation: jump 1s linear 1.6s infinite alternate;
        }

        div span:nth-child(10) {
            -webkit-animation: jump 1s linear 1.8s infinite alternate;
        }

        div span:nth-child(11) {
            -webkit-animation: jump 1s linear 2.0s infinite alternate;
        }

        div span:nth-child(12) {
            -webkit-animation: jump 1s linear 2.2s infinite alternate;
        }

        div span:nth-child(13) {
            -webkit-animation: jump 1s linear 2.4s infinite alternate;
        }

        div span:nth-child(14) {
            -webkit-animation: jump 1s linear 2.6s infinite alternate;
        }

        div span:nth-child(15) {
            -webkit-animation: jump 1s linear 2.8s infinite alternate;
        }

        div span:nth-child(16) {
            -webkit-animation: jump 1s linear 3.0s infinite alternate;
        }

        div span:nth-child(17) {
            -webkit-animation: jump 1s linear 3.2s infinite alternate;
        }
    @-webkit-keyframes jump {
        0% {
            top: 0px;
            color: #099dff;
        }

        50% {
            top: -10px;
            color: #f60;
        }

        100% {
            top: 10px;
            color: #0ccdff;
        }
    }
</style>

• html代码

<div style="margin:10px;">
    <span>点</span>
    <span>击</span>
    <span>上</span>
    <span>方</span>
    <span>蓝</span>
    <span>色</span>
    <span>字</span>
    <span>体</span>
    <span>”</span>
    <span>有</span>
    <span>趣</span>
    <span>功</span>
    <span>能</span>
    <span>“</span>
    <span>关</span>
    <span>注</span>
    <span>TA</span>
</div>