css3中你一眼就会的动画属性

css3动画

要创建 CSS3 动画，你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes关键帧属性

@keyframes 关键帧的名称{
    0%/from{
        
    }
    50%{
        
    }
    100%/to{
        
    }
}

• 当用@keyframes属性创建一个动画时，需要起一个关键帧的名称。其他元素可以通过animation属性调用这个动画。

animation属性

• animation是一个复合属性
  • 常用写法为animation：关键帧名称 动画运行时间 运行方式
  • animation-name 关键帧名称
  • animation-duration 动画持续时间
  • animation-timing-function 动画运用的类型（匀速linear、加速等）
  • animation-delay 动画的延迟
  • animation-iteration-count 动画运行的次数（默认一次，infinite无限循环）
  • animation-direction 动画运行的方向
    • reverse反向
    • alternate先正向后反相交替运行
    • alternate-revers先反后正交替
  • animation-play-state 动画运行状态
    • pause暂停
    • running运行
  • animation-timing-function 动画的类型
    • linear/ease/ease-in
    • step-start 没有动画中间的过渡效果。每次直接跳到下一帧开始的地方

现在你已经会调用动画了，当时怎么设置动画呢？动画又有哪些呢？
下面为你介绍位移、旋转、缩放。首先先创建一个3D舞台。

创建3d舞台

transform-style:preserve-3d作用是形成一个3d空间，这个属性一般添加在父元素即可。默认值为flat。

• 3d功能函数

1. 位移transform：translate（x，y，z）；
2. 旋转transform：rotate（x，y，z）；
3. 缩放transform：scale3d（x，y，z）；
4. 背面不可见属性backface-visibility：hidden；

注意transition和animation的区别

transition需要触发。animation不需要触发，调用关键帧即可。