css3 动画（@keyframes）
程序员文章站
2022-03-16 18:57:28
...
[email protected]
1.要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
使用规则：
- 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
- 指定至少这两个CSS3的动画属性绑定向一个选择：
- 规定动画的名称
- 规定动画的时长
形式如下：
需要规定动画 animation ：动画名称 时长；
@keyframes myfirst{
form{background：red;}
to {background：blue;}
}
<style>/*放在选择器中*/
div{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;/*历时5秒达到所有的变换效果*/
@keyframes myfirst{
from {background:red;}/*变换效果从背景红色，变浅直到逐渐变成黄色*/
to {background:yellow;}
}
</style>
注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
例如：animation：myfirst 5s； 动画名字是myfirst ，持续时间是5秒。
2.或用关键词 "from" 和 "to"，等同于 0% 和 100%，为了得到浏览器支持，需要 规定0%和100%。好处 ，不需要另规定时长。
形式如下：
@keyframes myfirst{
0% background：red；/开始是红色/
50% background：blue；/时间到百分之50,变为蓝色/
100% background：green；/最终变成绿色/
}**
**综合属性动画：
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;/*位置是相对的*/
animation-name:myfirst;/*动画名称*/
animation-duration:5s;/*动画持续时间*/
animation-timing-function:linear;/*规定动画的速度曲线*/
animation-delay:2s;/*动画延迟2s开始*/
animation-iteration-count:infinite;/*动画播放次数：无限次，默认是1次*/
animation-direction:alternate;/*规定动画是否在下一周期逆向地播放。默认是 "normal"。alternate：交替的*/
animation-play-state:running;/*规定动画是否正在运行或暂停。默认是 "running"。*/
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}/*开始时，左上角*/
25% {background:yellow; left:200px; top:0px;}/*向右远离left 200px，沿着顶部，若增大 直接向右下角运动*/
50% {background:blue; left:200px; top:200px;}/*向右远离left 200px ，向下运动*/
75% {background:green; left:0px; top:200px;}/*向左做运动，靠近 left*/
100% {background:red; left:0px; top:0px;}/*向上做运动，靠近顶端*/
}
</style>
</head>
<body>
<div></div>
</body>
上例中 最后效果，一个方块沿着上下左右，来回运动。
先顺时针一周后，逆时针一周，循环运动。
简化：
<style>
div{
width:100px;
height:100px;
background:red;
position:relative;/*位置相对的*/
animation:myfirst 5s linear 2s infinite alternate;/*动画设置：名称：myfirst，
动画时间：5s ，曲线运动，无限循环，交替播放动画*/
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
下一篇： 6搜索接口--1搜索