CSS基础0607

transition过渡

属性	描述
transition	简写属性，用于将四个过渡属性设置为单一属性。
transition-delay	规定过渡效果的延迟（以秒计）。
transition-duration	规定过渡效果要持续多少秒或毫秒。
transition-property	规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function	规定过渡效果的速度曲线。

实例：鼠标悬停在红色方块上1s后，在2s内宽度逐渐变为300px

div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}
div:hover {
  width: 300px;
}

transform转换

2D转换方法

2D转换方法（常见）：

1、 translate(x,y)	    定义 2D 转换，沿着 X 和 Y 轴移动元素
2、 rotate(angle)	    定义 2D 旋转， 在参数中规定角度
3、 scale(x,y)	        定义 2D 缩放转换，改变元素的宽度和高度
4、 skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴

3D转换方法（常见）：

1、 translate3d(x,y,z)	定义 3D 转换。	
	translateX(x)	    定义转换，只是用 X 轴的值。	 
	translateY(y)	    定义转换，只是用 Y 轴的值。	 
	translateZ(z)	    定义 3D 转换，只是用 Z 轴的值。
2、rotate3d(x,y,z)  rotateX(angle)	 rotateY(angle)	 rotateZ(angle)
3、scale3d(x,y,z)	scaleX(x)	     scaleY(y)	    scaleZ(z)

下例为转换添加过渡效果：效果链接

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}
div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

animation动画

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

实例：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}