css3动画

css3动画主要包含两个知识点：
1是css过渡（transition）
2是css动画（animation）

1.transition，css过渡是元素从一种样式逐渐改变为另一种的效果。必须规定两项内容：1，指定要添加效果的css属性，2.指定效果的持续时间。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title>
<style> 
div
{
width:100px;
height:100px;
background:red;
transition:background 2s;
-webkit-transition:background 2s; /* Safari */
}

div:hover
{
background:green;
}
</style>
</head>
<body>

<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>

</body>
</html>

注意：transition后面跟的属性就是要变化的属性。

2.animation。要创建css3，必须先了解@keyframes规则。@keyframes作用就是创建动画，可以指定一个css样式和动画逐步从目前的样式更改为新的样式。@keyfragmes里没有时间秒的概念，只有百分比的概念，0%就是动画的开始，100%就是动画的结束，动画可以设置播放次数，默认是1次。即播放完一次动画就停止。写完@keyframes接下来就是用animation去调用keyframes了。

使用例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}

@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;}
}

@-moz-keyframes myfirst /* Firefox */
{
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;}
}

@-o-keyframes myfirst /* Opera */
{
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动画

zorro

引用和评论

华为DevEco安装Copilot