版权声明：哼！坏人！这是我辛辛苦苦码的！ https://blog.csdn.net/DurianPudding/article/details/87862437
建议浏览器打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#transition-demo {
height: 100px;
background-color: yellowgreen;
transition: height 1s 0.5s ease-out;
}
#transition-demo:hover {
height: 200px;
}
#animation-demo {
height: 200px;
animation: 3s type forwards alternate infinite;
animation-play-state: running;
}
#animation-demo:hover {
animation-play-state: paused;
}
@keyframes type {
from {background: yellowgreen}
50% {background: yellow}
to {background: aquamarine}
}
</style>
</head>
<body>
<h1>css3动画</h1>
<pre>参考：<a href="http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html" target="_blank">阮一峰的文章</a></pre>
<p>主要有transition属性和animation属性</p>
<div id="transition-demo">
transition例子
</div>
<h3>transition常用属性</h3>
<div>
<p>transition-property: height; // 适用于哪个属性</p>
<p>transition-duration: 1s;</p>
<p>transition-delay: 1s;</p>
<p>transition-time-function: ease/linear/ease-in(加速)/ease-out/cubic-bezier(自定义);</p>
</div>
<h3>transition特性</h3>
<div>
<p>0. 需要具体数值，不能用block,none等</p>
<p>1. transition需用事件触发，不能在网页加载时自动发生</p>
<p>2. 一次性，不能重复发生，除非一再触发</p>
<p>3. 只有两个状态：开始和结束状态</p>
<p>4. 一条transition规则只能定义一个属性</p>
</div>
<div id="animation-demo">
animation例子，鼠标悬停试试
</div>
<h3>animation常用属性</h3>
<div>
<p>animation-name: rainbow;</p>
<p>animation-duration: 1s;</p>
<p>animation-timing-function: ease-in-out;</p>
<p>animation-delay: 1s;</p>
<strong>animation-fill-mode(动画停留在): none(动画没开始时)/forwards(结束)/backwards(第一帧)/both;</strong>
<p><strong>animation-direction(动画播放方向): normal(正向)/alternate(交替慎用)/reverse(反向)/alternate-reverse(反向交替慎用);</strong></p>
<p>animation-iteration-count(播放次数): 3/<strong>infinite(无限)</strong>;</p>
<p>steps(10)函数实现分步过渡</p>
<p>animation-play-state(用于让动画保持<strong>突然终止时的状态</strong>):running(例如悬停时播放)/paused(非悬停时暂停)；
<strong>注意这个属性不能简写</strong>
</p>
</div>
</body>
</html>