css动画

CSS动画

一、transition实现过渡动画——在属性变化时触发动画,搭配伪类使用

1. transition-property 可以设置想过渡的css属性

   • all(默认)
   • none
   • property(属性的名称) 例：transition-property:width,height

2. transition-duration 过渡持续的时间
   例：transition-duration:200ms

3. transition-timing-function 设置过渡速度也可以设置怎么过渡

   • linear 以相同的速度过渡
   • ease 先变快然后又变慢
   • ease-in 加速运动
   • ease-out 减速运动
   • ease-in-out 先加后减
   • cubic-bezier(n,n,n,n）这个才是最基本的，上面的基本都是这个函数的一种情况

4. transition-delay 例：transition-delay:1s

5. transition：上面4个之和，持续时间在前，delay时间在后

二、transform实现转变动画

1. translate 移动
   • translate(20px) 水平移动
   • translate(20px,20px)x、y轴移动
   • translateX()
   • translateY()
   • translateZ() 注：屏幕是2d的，图像就会以变大的形式展示
   • translate3d(x,y,z)

   ---

2. rotate 旋转
   • 2D旋转
     • rotate（30dge）——以中心为基点顺时针30度
     • rotate(-30dge)——逆时针
   • 3D旋转
     • rotateX(30dge) ——X轴为基点…
     • rotateY(30dge)——Y轴为基点…
     • rotateZ(30dge)
     • rotate3d(x,y,z,angle)
     • rotate(x,y,z,angle)——和上面的一样
3. scale——缩放
   • 2D缩放
     • scale（0.5）——宽高都缩
     • scale(0.4,0.5)——宽缩0.4，高缩0.5
   • 3D缩放
     • scale3d(x,y,z)
     • scaleX()
     • scaleY()
     • scaleZ()
4. transform-origin:20px,30px——设置基准点
   相对于图形左上角向右20px，向下30px
5. skew ——倾斜

三、animation动画与关键帧

1. 设置关键帧 @keyframes来创建动画

@keyframe test{
0%{     }
50%{    }
100%{    }
}

2. animation-name 绑定动画

在标签上用，后面接@keyframe 的名称
例：animation-name=test

3. animation-duration 用时

4. animation-timing-function 设置过渡速度也可以设置怎么过渡

• ease
• linear
• ease-in
• ease-out
• …

5.animation-delay 延迟

6.animation-iteration-count 执行次数

7. animation-direction 动画执行方向

• normal（默认）每次都是（0%到100%）
• reverse 每次都是（100%到0%）
• alternate 每次都是（0-100然后100-0）alternate英文翻译为轮流
• alternate-reverse （100-0然后0-100）

8. animation-play-state 动画的可执行状态

• running
• paused

9.animation（前面都太繁琐了，还是这个好）