CSS3过渡、动画和形变

CSS3过渡、动画和形变

详情：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

过渡transition

.item {
   
	/*transition: 过渡时间 延迟时间 目标属性 过渡速度；可用‘，’同时指定多个属性变化*/
	transition: 1s 1s height linear, 1s width;
}

单独定义：

	transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;

速度定义：

ease：逐渐放慢（默认）

linear：匀速

ease-in：加速

ease-out：减速

cubic-bezier函数：自定义速度模式（工具网站: https://cubic-bezier.com/#.25,.1,.25,1）

动画Animation @keyframes动画关键帧

首先，CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称。

div:hover {
   
  animation: 1s rainbow;
}

上面代码表示，当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。

@keyframes