1、transition 过渡

• transition-property     过渡效果的 CSS 属性的名称（height、width、opacity等）。
• transition-duration   完成过渡效果需要时间。
• transition-timing-function     规定速度效果的速度曲线。（渐变）
• transition-delay          过渡效果何时开始（延迟时间）。

注：如果 transition-duration属性时长为 0，就不会产生过渡效果。

1.2、渐变函数的值：

渐变函数是transition-timing-function；

其中贝塞尔曲线的预设值

• ease渐快，匀速，减慢cubic-bezier(0.25,0.1,0.25,1)
• ease-in渐快，匀速cubic-bezier(0.42,0,1,1)
• ease-out匀速，减慢cubic-bezier(0,0,0.58,1)
• ease-in-out和ease类似，但比ease的加速度大（幅度大）cubic-bezier(0.42,0,0.58,1)
• linearr全程匀速cubic-bezier(0,0,1,1)

1.3、简写方式：transition：css属性名  过度时间  渐变函数值  延迟时间；

默认方式：transition:all 1s; 实例

2、transform 变形

• 旋转rotate

rotate(xx deg)(2D)
rotateX()(3D)
rotateY()(3D)
以中心为基点，
`deg`表示旋转的角度，为负数时表示逆时针旋转。

• 扭曲skew

skew(x,y) 
skewX(x) 
skewY(y)
以中心为基点，
第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。

• 缩放scal

scale(x,y)
scaleX(x,1)
scaleY(1,Y)
缩放基数为1，如果其值大于1元素就放大，反之其值小于1为缩小。

• 移动translat

translate(x,y)
translateX(x)
translateY(y)
以中心为基点按照设定的`x`,`y`参数值,对元素进行进行平移。

• 矩阵变形matri

参考(transform - CSS（层叠样式表） | MDN (mozilla.org))

实例

3、animotion 动画

3.1、语法：

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}
或者
@keyframes pulse {
from {
    background-color: #001F3F;
    }
to {
    background-color: #FF4136;
    }
}

3.2、属性

• animation-name 应用的一系列动画名称，由@keyframes定义的动画序列。
• animation-duration 完成动画所花费的时间，一个动画周期的时长。。
• animation-timing-function 规定动画的速度曲线，CSS动画在每一动画周期中执行的节奏。

transition中的transition-timing-function 中的值一样

• animation-delay 在动画开始之前的延迟。
• animation-iteration-count 动画应该播放的次数。

通常为整数，默认是1,；取值为infinite，动画将无限次的播放

• animation-direction 是否轮流反向播放动画。

normal 默认值，如果设置为normal时，动画每次循环都是向前（即按顺序）播放
alternate（轮流），动画播放在第偶数次向前播放，第奇数次向反方向播放（animation-iteration-count取值大于1时设置有效）

• animation-fill-mode 动画结束后，元素的样式将回到起始状态，animation-fill-mode属性可以控制动画结束后元素的样式

none（默认，回到动画没开始时的状态。）
forwards（动画结束后动画停留在结束状态）
backwords（动画回到第一帧的状态）
both（根据animation-direction轮流应用forwards和backwards规则）。

• animation-play-state 动画是否运行或者暂停

running 可以通过该值将暂停的动画重新播放，这里的重新播放不是从元素动画的开始播放，而是从暂停的那个位置开始播放。
paused 暂停播放

参考animation - CSS（层叠样式表） | MDN (mozilla.org)

实例