深刻浅出篇 — animation & transition

一. animation

其动画实现相似动画书同样，须要设置关键帧,执行每一帧的不一样状态就构成了动画
复制代码

1. 关键帧： @keyframs 关键帧名称 { 设置的帧 }

例：

@keyframes move{
        0%{
            /* 缩小 */
            transform: scale(0.5);
            border-radius: 100%;
        }
        50%{
            background: rgb(220, 160, 49);
        }
        100%{
            background: yellow;
            transform: scale(1.5);
            border-radius: 0%;
        }
}
复制代码

2. 经过animation来启用关键帧

例：

animation:move 2s
整体来讲一个动画效果就是这么启用的，接下来介绍一下animation的其余属性
复制代码

3. animation的属性

• animation-name : move (关键帧的名称,此处能够自定义)
• ----分割线----
• animation-duration : 1s (设置这个动画总共多长时间完成)
• ----分割线----
• animation-timing-function : linear (运动状态，此处为匀速)
• ----分割线----
• animation-delay : 2s (设置何时开始执行动画的时间)
• ----分割线----
• animation-iteration-count : infinite (永不间断的执行动画)
• animation-iteration-count: 3 (执行几回关键帧)
• ----分割线----
• animation-direction : alternate(从头至尾执行动画/往复运动)
• animation-direction : reverse (反向执行关键帧动画)
• ----分割线----
• animation-fill-mode : backwards (当即做用第一个关键帧动画效果)
• animation-fill-mode : forwards (运动结束后，关键帧中止在最后一帧的位置)
• animation-fill-mode : both (开始在第一个关键帧的位置,结束在最后一个关键帧的位置)

例：

.demo{
        width: 250px;
        height: 250px;
        background: red;
        margin: 100px auto;
        animation: stretch 2s infinite alternate linear;
    }
注：复合属性位置可颠倒  但动画执行时间在前  间隔时间在后
复制代码

4. animation的兼容写法

• 例：@-wekbit-keyframes

二. transition 过渡动画

题外话：transform  transition translate 的不一样
1. transform 和 transition 是css3中的属性，而看似类似的translate为transform中的一个值
2. transform 变形 静态的
3. transition 动画效果
复制代码

1. transition-propetry : width/height/all/... ( 用于监听哪一个属性改变的值)

例：

transition: left 2s  1s ease-in ;   （当一个元素的 left 值发生变化时，这个效果就会被启用）
复制代码

2. transiton-delay : 0 （动画延时时间）
3. transition-duration : 2s (该动画总共执行的时间)
4. transition-timing-function : linear; (指定过渡动画的运动状态，这里是匀速)

小知识点：

transition-timing-function的不一样值的含义
1. ease-in 慢到快
2. ease-out 快到慢
3. ease-in-out 慢快慢
4. cubic-bezier(x,y,x,y) 贝塞尔曲线
复制代码

三. 随心记

1. animation : run 4s, foo 3s ; (两个会并行运动；并非一个先运动，一个后运动)
2. animation的关键帧中( 0% === from ,100% === to )