CSS巧妙使用-动画

CSS动画的实现主要有两种，一种是使用CSS3的transition属性，另一种就是animation属性，这两个属性都可以用来实现一些动效，transition一般用来实现简单点的的够了，比较复杂的动效还是要依靠animation。最大区别就是transition不能定制化地设置动画的形态，animation可以比较灵活一些。

transition

.img-css {
    height: 150px;
    width: 150px;
    transition: 1s ease;
}
.img-css:hover {
	height: 450px;
	width: 450px;
}
<img class=img-css src="test.jpeg" />

transition的属性值有以下几种：
1）transition-property:
	height、width等CSS属性，默认是all
2）transition-duration、transition-delay
	transition： 1s height, .5s 1s width;   ------width在height开始变化500ms后再变化；
3）transition-timing-function
	ease              -- 默认【cubic-bezier(.25, .1, .25, 1)】
	linear            -- 匀速【cubic-bezier(0, 0, 1, 1) 或 cubic-bezier(1, 1, 0, 0)】
	ease-in           -- 加速【cubic-bezier(.42, 0, 1, 1)】
	ease-out          -- 减速【cubic-bezier(0, 0, .58, 1)】
	ease-in-out       -- 先加速再减速【cubic-bezier(.42, 0, .58, 1)】
	cubic-bezier函数  -- 自定义速度模式

比如有这样一个需求，在某些高度未知的情况，使用动画缓慢展示时，仅仅用transition; height 1s；这种是不会生效的，因为transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。可以结合CSS变换来实现；

input:focus + .tips{
	transition:.5s transform;
	transform-origin: 1.4em -.4em;
}
input:not(:focus) + .tips {
	transform: scale(0);
}

因为transition必须要指定起始状态和最终状态，所以transition不能在页面加载完成时自动开始动效，除非使用事件触发或setTimeout回调之类的。

animation

animation允许我们通过指定关键帧的状态样式，从而实现关键帧与帧之间的过渡。那么实现动画最主要的就是要设置一些关键帧。

@keyframes animationName { /* animationName需要在开始动画的时候用*/
	form { /* 也可以0% */
		
	}
	to { /* 也可以100% */
		
	}
}

animation有以下几个属性需要设置：

animation-name: 动画名;
animation-duration: 动画时长;
animation-timing-function: 动画时间函数;
animation-delay: 延时;
animation-fill-mode: 动画结束时停留在哪种状态;
animation-direction: 改变动画状态方向，起始-结束；结束-起始......;
animation-iteration-count: 动画重复次数，可以具体的次数，也可以无限循环;
animation-play-state:可以使动画暂停或者继续。

animation-timing-function

animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: cubic-bezier();
animation-timing-function: step-start; /* 可以实现逐帧的动画 */
animation-timing-function: step-end;

时间函数的各种形态：


可以看到 ease-in和ease-out是互为相反的一对曲线，也就是说这两个的动画速度其实也是相反的。利用这个可以做点事情…

example1:

<div class="box">
    <div class="ball"></div>
</div>

.box {
	height: 300px;
	width: 50px;
	background-color: #00d6ff;
	position: relative;
	border-radius: 10px;
}
.ball {
	width: 50px;
	height: 50px;
	background: radial-gradient(circle at 20px 20px, #e6d5cd, #f5660a);
	position: absolute;
	top: 0;
	border-radius: 30px;
	animation: bounce 3s forwards;
}
@keyframes bounce {
	60%, 80%, to {
		transform: translateY(250px);
	}
	70% {
		transform: translateY(150px);
	}
	90% {
		transform: translateY(200px);
	}
}

比如上面是一个小球不停回弹的例子，但是这个明显会在回弹的时候有些不顺畅，因为小球回弹的速度与下降的速度没有很好的衔接，导致我们在看的时候会不平滑过渡。然后观察互为相反贝塞尔曲线的两个图【比如ease-in和ease-out】，有个特点是：50%时，ease-in走过的曲线正好和ease-out没走的曲线是一致的，所以那么回弹的时候正好可以用相反的那个曲线来设置动画过渡，这样可以达到平滑过渡的效果。animation默认的时间函数是ease,那么回弹时设置ease的相反贝塞尔曲线就可以了【cubic-bezier(.1,.25,1,.25)】。

example2:
animation的时间函数相比transition多了一个steps，利用这个就可以实现一些逐帧动画了。

<div class="box">CSS animation example!</div>

@keyframes typing {
	from {
		width: 0;
	}
}
.box {
	width: 22ch;
	white-space: nowrap;
	overflow: hidden;
	animation: typing 9s steps(22) 
}

上面就是一个类似的打字效果，ch是比较不常见的一个单位，对于等宽字体来说，每个字体的宽度都是一样的，可以使用ch为单位，表示22个等宽字符，那么就可以用22个步进长度来做一字字的显示。

然后steps在浏览器上是有兼容性的，IE是不支持的。

animation-direction

animation-direction: normal       /* 正向开始*/
animation-direction: reverse      /* 反向开始*/
animation-direction: alternate    /* 动画交替反向运行*/
animation-direction: alternate-reverse     /* 反向交替， 反向开始交替 */

example1:
比如一张横向很长的风景图，可以从左到右动画过渡，然后再接着从右到左过渡回来，有没有一张环视一周的感觉。

<div class="box">
	<div class="img-box"></div>
</div>

.box {
	width: 300px;
	height: 300px;
	overflow: hidden;
}

.img-box {
	width: 1500px;
	height: 1000px;
	background: url(./test.png) 0 0 no-repeat;
	animation: move 5s alternate infinite;
}
@keyframes move {
	to {
		background-position: -100% 0;
	}
}

animation-play-state

如果再继续想让上面的风景停止住，并且又能够继续接着之前停止的状态继续过渡呢，就要用到animation-play-state属性了，它有paused和running两种属性。

.img-box {
	width: 1500px;
	height: 1000px;
	background: url(./test.png) 0 0 no-repeat;
	animation: move 5s alternate infinite;
	animation-play-state: paused;
}
.img-box:hover {
	animation-play-state: running;
}

这样就可以实现hover时继续动画，鼠标移开时停止动画啦。

以上是动画的介绍和一些案例，这仅仅是动画的冰山一角，还有很多很多更炫酷的特效可以通过动画来实现，当然一般也不是仅仅动画就可以了，还需要background、伪类、伪元素等其他css属性。