@keyframes帧动画简介
- @keyframes是什么
- @keyframes怎么用
- @keyframes用法详解
@keyframes是什么
首先keyframes是什么意思呢？keyframes关键帧（计算机动画术语）。
计算机动画术语， 帧——就是动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。
所以@keyframes就比较好理解了，它是来定义css动画中的关键帧的。
@keyframes怎样使用
一个简单的红色方块移动的例子。
<!DOCTYPE html>
<html>
<head>
<title>animation</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: red;
position:relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果如图
此例中@keyframes声明了一个动画，名字mymove。其中from与0%同样的意思，表示一个动画的开始；to与100%同样的意思，表示一个动画的结束。可以写任意的百分比数字表示整个动画过程中百分之多少。
此动画的意思表示是动画一开始top值为0px，到动画结束表示是动画结束top值为200px。可以看出我们只用利用@keyframes属性定义出动画中的每个关键帧就可以完成一个动画的定义了。
@keyframes用法详解
语法结构:
@keyframes animationname {
keyframes-selector {css-styles;}
}参数解析:
1.animationname:声明动画的名称。
2.keyframes-selector:用来划分动画的时长，可以使用百分比形式，也可以使用 “from” 和 “to”的形式。”from” 和 “to”的形式等价于 0% 和 100%。
3.css-style:正常的css样式
通过@keyframes你能够创建动画，创建动画的原理是，将一套CSS样式变成另一套样式。在动画过程中可以多次改变这套CSS样式。以百分比来规定发生改变的点，或者通过‘from’和‘to’，等价于0%和100%。0%是动画的开始，100%是动画的结束。
1938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
