css动画属性整理，demo两则

css动画在项目中使用频繁，取代了flash或者动态图片的使用，以及更加出色的页面交互表现能力；绘制一个css的动画效果主要使用transition和animation;

transition属性

属性	描述
transition	简写，用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的css属性名称
transition-duration	定义过渡效果花费的时间，默认是0
transition-timing-function	规定过渡效果时间曲线，默认是‘ease’
transition-delay	规定过渡效果何时开始，默认是0

transition-property

规定应用过渡的css属性名称
语法：transition-property：none|all|property

值	描述
none	没有属性会获得过渡效果
all	所有属性都将获得过渡效果
property	定义应用过渡效果的css属性名称列表，列表以逗号分隔

transition-duration

规定过渡效果花费的时间
语法：transition-duration：time

值	描述
time	规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是0，意味着不会有过渡效果

transition-timing-function

规定过渡效果的速度曲线
语法：transition-timing-function：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(num,num,num,num)

值	描述
linear	过渡从头到尾的速度都是相同的
ease	过渡以低速开始,然后加快，在结束前变缓
ease-in	过渡以低速开始
ease-out	过渡以低速结束
ease-in-out	过渡以低速开始和结束
cubic-bezier()	在cubic-bezier函数中自己的值，可能的值是从0-1的数值

transition-delay

规定过渡效果花费的时间
语法：transition-delay:time

值	描述
time	规定在过渡效果开始之前需要等待的时间，以秒或毫秒计

简单都组合使用几个过渡属性以及位置即可以快速实现下图效果；

完整代码如下：

	<div class="demo">
        <div class="demo-title">
            <h2>火车出行</h2>
            <h3>TRAIN</h3>
        </div>
        <div class="demo-pic">
            <img src="pc1.png" alt="">
            <img src="pc2.png" alt="">
            <img src="pc3.png" alt="">
        </div>
        <div class="shadow"></div>
    </div>

     .demo {float: left; margin-top: 100px;margin-left: 100px;width: 200px;}
     .demo:last-child {margin-right: 0;}
     .demo-title {text-align: center;}
     .demo-title h2 {font-size: 20px;color: #888;}
     .demo-title h3 {font-size: 18px;color: #78c1ff;}
     .demo-title h2,.demo-title h3 {opacity: 0;}
     .demo:hover .demo-title h2,.demo:hover .demo-title h3 {opacity: 1;transform: translateY(-40px);transition: all 1s;}
     .demo:hover .demo-title h3 {transition-delay: .2s;}
     .demo-pic {position: relative;width: 200px;height: 200px;border-radius: 50%;overflow: hidden;}
     .demo-pic img {position: absolute;}
     .demo-pic img:nth-child(1),.demo-pic img:nth-child(2) {left: 0;}
     .demo-pic img:nth-child(3) {left: -400px;}
     .demo:hover .demo-pic {transform: scale(1.2);transition: all .4s linear;}
     .demo:hover .demo-pic img {transition: all 1s linear;}
     .demo:hover .demo-pic img:nth-child(1),.demo:hover .demo-pic img:nth-child(2) {left: -400px;}
     .demo:hover .demo-pic img:nth-child(3) {left: 0;}
     .shadow {z-index: -1;width: 200px;height: 30px;margin-top: -56px;border-radius: 50%;box-shadow: 0 40px 20px rgba(120, 193, 255, .5);}
     .demo:hover .shadow {transform: scale(1.1);transition: all .5s linear;}

animation

除了transition过渡以外，animation就是另外一个大头了，animation使我们可以通过css3创建动画，这可以在许多网页中取代动画图片、flash动画以及javascript。

@keyframes

@keyframes规则

定义和用法：
创建动画的原理是，将一套css样式逐渐变化为另一套样式。
以百分比来规定改变发生的时间，或者通过关键词‘from’和‘to’,等价于0%和100%
0%是动画的开始时间，100%动画的结束时间。
注意用动画属性来控制动画的外观同时将动画与选择器绑定。
语法：

	@keyframes animationname{
		keyframes-selector{css-styles}
	}

值	描述
animationname	必须，定义动画的名称
keyframes-selector	必须，动画时长百分比，和法值0-100%；from-to
css-styles	必须，一个或多个合法的css样式属性

keyframes所有动画属性：

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，出了animation-play-state属性
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期所话费的秒或毫秒，默认是0
animation-timing-function	规定动画的速度曲线，默认是ease
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1
animation-direction	规定动画是否在下一周期逆向的播放，默认是normal
animation-play-state	规定动画是否正在运行或暂停，默认是running
animation-fill-mode	规定对象动画时间之外的状态

animation-name

定义和用法
animation-name属性为@keyframes动画规定名称
语法：animation-name:keyframename|none

值	描述
keyframename	规定需要绑定到选择器的keyframe的名称
none	规定无动画效果（可用于覆盖来自级联的动画）

animation-duration

定义和用法
动画完成一个周期所需要的时间，以秒或毫秒计
语法：animation-duration：time

值	描述
time	规定完成动画所话费的时间，默认值是0，意味着没有动画效果

animation-timing-function

定义和用法
规定动画的速度曲线
语法：animation-timing-function：value

值	描述
linear	过渡从头到尾的速度都是相同的
ease	过渡以低速开始,然后加快，在结束前变缓
ease-in	过渡以低速开始
ease-out	过渡以低速结束
ease-in-out	过渡以低速开始和结束
cubic-bezier()	在cubic-bezier函数中自己的值，可能的值是从0-1的数值

animation-delay

定义和用法
animation-delay属性定义动画何时开始，值以秒或者毫秒计
语法：animation-delay：time

值	描述
time	可选，定义动画开始前等待的时间，以秒或毫秒计，默认值是0

tips:允许负值，time = -1s时动画马上开始，但跳过1秒进入动画

animation-iteration-count

定义和用法
animation-iteration-count属性定义动画的播放次数
语法：animation-iteration-count：n|infinite

值	描述
n	定义动画播放次数的数值
infinite	规定动画应该无限次播放

animation-direction

定义和用法
属性定义是否应该轮流反向播放动画
如果animation-direction值是alternate,则动画会在奇数次数（1.3.5…）正常播放，而在偶数次（2.4.6…）向后播放
语法：animation-direction：normal|alternate

值	描述
normal	默认值，动画应该正常播放
alternate	动画应该轮流反向播放

animation-play-state

定义和用法
animation-play-state属性规定动画正在运行还是暂停。
tips:可以在javascript中使用该属性，这样就能在播放过程中暂停动画。
语法：animation-play-state:paused|running

值	描述
paused	规定动画已暂停
running	规定动画正在播放

animation-fill-mode

定义和用法
animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。
tips:其属性值是由逗号分隔的一个或多个填充模式关键词。
语法：animation-fill-mode:none|forwards|backwards|both

值	描述
none	不改变默认行为
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards	在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both	向前和向后填充模式都被应用

综合运用animation以及transition可以实现如下骰子效果；自己敲一遍基本足够掌握动画的基本使用了；

废话少说，上代码：

	<div class="wrap">
        <div class="demo">
            <div id="div1" class="side">1</div>
            <div id="div2" class="side">2</div>
            <div id="div3" class="side">3</div>
            <div id="div4" class="side">4</div>
            <div id="div5" class="side">5</div>
            <div id="div6" class="side">6</div>
        </div>
    </div>

	#div1 {left: -50px;transform: translateX();transform: rotateY(90deg);}
    #div2 {left: 50px;transform: translateX();transform: rotateY(-90deg);}
    #div3 {transform: translateZ(50px);}
    #div4 {transform: translateZ(-50px);}
    #div5 {top: 50px;transform: translateX();transform: rotateX(90deg);}
    #div6 {top: -50px;transform: translateX();transform: rotateX(90deg);}
    @keyframes animationevent {
        0% {transform: rotateY(0);}
        50% {transform: rotateY(360deg);}
        100% {transform: translate3d(10px,10px,100px);}
    }
    .wrap {
        margin: 100px auto;
        width: 100px;
        perspective: 300;
        -moz-perspective: 300;
        -webkit-perspective: 300;
        perspective-origin: 100px 10px;
    }
    .demo {
        position: relative;
        top: 50px;
        width: 100px;
        height: 100px;
        animation: animationevent 5s infinite;
        animation-iteration-count:1;
        transform-style: preserve-3d;
    }
    .side {
        position: absolute;
        width:100px;
        height:100px;
        border: 1px solid #888;
        font-size: 30px;
        color: #888;
        line-height: 100px;
        text-align: center;
        border-radius: 30px;
    }

最后再分享一个我经常使用的动画效果素材库；https://animate.style/;一般项目中的动画效果基本都能满足，如果嫌弃动画库笨重可以下一个开发版的，直接搜索需要的效果类名，把目标动画cv出来就是了，非常适合懒人伸手党；对于新人学习简单动画，看看源码也非常简单。