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秒作动画就能够了