css动画

@keyframes

语法：@keyframes animationname {keyframes-selector {css-styles;}}

说明：我们可以通过keyframes来创建动画，keyframes-selector默认是从0%到100%（from到to）

animation

语法：animation: animation-name | animaton-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direaction | animation-paly-state

说明：

• animation-name: 动画名称, defaultVal:none, 特定的name必须和keyframes配合使用
• animation-duration: 动画持续时间, defaultVal: 0s
• animation-timing-function: 动画过渡类型
• 过渡类型: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )
• animation-delay: 动画延迟时间, defaultVal: 0s
• animation-iteration-count: 动画循环次数, defaultVal: 1
• 循环类型: infinite | 具体循环次数
• animation-direction: 动画在循环中是否反向运动, defaultVal: normal | alternate
• animation-play-state: 动画状态

transform

语法：
none: 无转换
translate: 平移 exp: translate(120px, 0)
translateX: 水平方向平移
translateY: 垂直方向平移
rotate: 旋转 deg exp: rotate(10deg)
scale: 缩放 number exp: scale(1.5)
scaleX: 水平方向缩放
scaleY: 垂直方向缩放
skew: 斜切扭曲 deg exp: skew(10deg)
skewX: 水平方向扭曲
skewY: 垂直方向扭曲

说明：对实例做一些变化操作

transfrom-origin: 变化应用的原点（中心点）

• 同时用百分比来指定原点的横纵坐标： ±N% ±N%
• 指定原点的横坐标可以为以下几项：left | center | right
• 指定原点的纵坐标可以为以下几项：top | center | bottom

transition

语法：transition： transition-property | transition-duration | transition-timing-function | transition-delay

说明：动画过渡

transition-property: 过渡应用的css属性， defaultVal: all（应用到所有css样式上） | none | 指定的css属性

示例：

实现一个div，顺时针转动

{
    @keyframes mydemo {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    animation: mydemo 10s linear infinite;
}