CSS3关键帧动画小记
2016-08-02 本文已影响86人
邢泽川
简介
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果，keyframes关键帧动画是我们常用的添加动画的方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
/*关键帧：keyframes*/
/* 使用关键帧动画就三步：1.定义动画 2.调用动画 3.配置动画 */
/*第一步：定义动画，用@keyframes 定义一个动画效果，后边紧跟该动画效果的名字，通过名字来调用这个动画*/
@keyframes myAnimation {
/*from {
}
to {
}只能设置起点和终点*/
/*通过关键字或百分比来设置关键帧的时间*/
/*在大括号中设置关键帧状态的属性，多个属性之间使用“;”分隔。前后状态的属性要一致*/
0% { width: 100px; height: 100px }
/*0%不是动画的初始状态，div的状态才是初始状态*/
100% { width: 500px; height: 500px }
}
/*关键帧动画为了防止部分浏览器无法执行，需要添加私有前缀;-webkit-*/
@-webkit-keyframs myAnimation {
}
/*第二部：调用关键帧动画*/
div {
width: 50px;
height: 50px;
background-color: red;
/*调用*/
/*选中关键帧动画名称（必选项）*/
animation-name: myAnimation;
-weblit-animation-name: myAnimation;
/*设置动画执行时间（必选项）*/
animation-duration: 10s;
-webkit-animation-duration: 10s;
/*第三部配置关键帧动画*/
/*设置动画执行的时间函数（运动速率变化曲线）(可选）*/
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
/*设置动画延迟执行的时间(可选）*/
animation-delay: 2s;
-webkit-animation-delay: 2s;
/*设置动画执行次数：具体数字表示让动画执行指定次数，infinite无限次数，(可选）*/
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
/*设置动画执行方向：向前（默认，normal:从0到100%) 、来回执行（0-100%-0）(可选）*/
animation-direction: alternate;
-webkit-animation-direction: alternate;
/*设置动画执行结束后，保留最后一帧的样式 (可选）*/
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
/*上面的写法比较麻烦，关键帧动画可以使用集合属性来书写*/
-webkit-animation: myAnimation 10s ease 2s infinite alternate forwards;
-o-animation: myAnimation 10s ease 2s infinite alternate forwards;
animation: myAnimation 10s ease 2s infinite alternate forwards;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
