CSS3属性

transition

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。单位是 秒 比如 0.5s
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。立马开始

如果想要所有的属性都变化过渡， 写一个all 就可以

运动曲线示意图：默认是 ease

div {
	width: 200px;
	height: 100px;
	background-color: pink;
	/* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
	transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
	/* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */	
}
div:hover {  /* 鼠标经过盒子，我们的宽度变为400 */
	width: 600px;
	height: 300px
}

transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */

animation和@keyframes

/* Safari 和 Chrome */
@-webkit-keyframes mycolorchange 
{
    from {
        background: red;
    }
    to {
        background: yellow;
    }
}

// 在需要使用这段动画的元素里添加
-webkit-animation: mycolorchange 1s infinite;

@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode	规定对象动画时间之外的状态。

设置播放延迟

.item{
  webkit-animation: revolving 4s 0s infinite;
  animation: revolving 4s 0s infinite;
}
@-webkit-keyframes revolving{
  0,75%{
    -webkit-transform: perspective(700px) rotateX(90deg);
  }
  87.5%{
    -webkit-transform: perspective(700px) rotateX(0deg);
  }
  100%{
    -webkit-transform: perspective(700px) rotateX(-90deg);
  }
}

把总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画就可以了