简述css3实现元素动画的方法（css3动画实现原则）
本文目录
css3动画实现原则
要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
实例：
《!DOCTYPE html》
《html》
《head》
《meta charset="utf-8"》
《title》css3动画实例《/title》
《style》
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@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;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
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》
《p》《b》注意:《/b》 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。《/p》
《div》《/div》
《/body》
《/html》
css3如何规定当浏览到该元素时才执行相应的动画
可以使用伪类来实现(例如 div:hover)，在这个伪类选择器中添加要加入的动画名称，即可达到效果。举个例子：
《style》
.abc{ width:50px; height:50px; background:#000;}
.abc:hover{ animation:maozi 25s ease infinite;}
@keyframes maozi{
0%{ width:50px; height:50px;}
50%{ width:400px; height:400px;}
100%{ width:20px; height:60px;}
}
《/style》
另外还有一种方法，就是使用js来实现添加一条class引用，效率没有伪类实现方法高。
css3动画有哪些实现方式
css3动画有哪些实现方式？
Transitions 、transforms和 Animations
Transitions特点：平滑的改变CSS的值
transforms特点：变换主要实现（拉伸，压缩，旋转，偏移）
Animations特点：适用于CSS2，CSS3
更多文章：
2026年10月11日 07:00
2026年10月11日 06:00
在from子句中可以出现（如何在from 子句中嵌套查询下面的语句在access中出错！）
2026年10月11日 05:20
countif函数统计个数怎么用（countif函数怎么用 详解Excel中countif函数的使用方法）
2026年10月11日 03:30
正则匹配数字之前的字符（正则表达式如何匹配前面是数字、中间是“/”、后面也是数字，就像2/3专业的模式）
2026年10月11日 03:00
2026年10月11日 01:40
2026年10月11日 01:00
orlnsertbootmediinselected（我电脑开机显示这个是什么意思or insert boot media in select）
2026年10月10日 23:00
display的用法（display是什么意思 详解display的含义和用法）
2026年10月10日 22:00
html全部居中代码（怎么让网页居中显示，html如何让网页居中）
2026年10月10日 21:10
