<!doctype html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" ?????????content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>animation动画</title> ???<style> ???????@keyframes change { ???????????10%{ ???????????????background-color: red; ???????????} ???????????50%{ ???????????????background-color: black; ???????????} ???????????100%{ ???????????????background-color: orange; ???????????????width: 500px; ???????????} ???????} ???????#animation{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: darkslategray; ???????????/*使用动画必要的两个属性*/ ???????????/*1.制定动画名称*/ ???????????animation-name: change; ???????????/*2.动画持续时间*/ ???????????animation-duration: 5s; ???????????/*3.动画播放次数(infinite:无限次播放)*/ ???????????animation-iteration-count: 2; ???????????/*4.动画使用的速度函数*/ ???????????animation-timing-function: linear; ???????????/*5.动画在下一次播放的方向(Z方式展示)*/ ???????????animation-direction: Alternate; ???????????/*6.动画执行完毕后的状态*/ ???????????????/*1.forwards:动画保持最后的显示效果*/ ???????????????/*2.backwards:动画回到最初的显示效果*/ ???????????animation-fill-mode: both; ???????????/*7.动画延迟时间*/ ???????????animation-delay: 2s; ???????} ???</style></head><body><div id="animation"></div></body></html>
03.CSS动画-->自定义动画
原文地址：http://www.cnblogs.com/ronghtp/p/7649726.html