简介
通过 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>
网友评论