询问这个问题的时候会继续往下问到js如何实现动画效果
@keyframes name
- [animation-name] 规定需要绑定到选择器的 keyframe 名称
- [animation-duration] 规定完成动画所花费的时间，以秒或毫秒计。
- [animation-timing-function]规定动画的速度曲线。
- [animation-delay] 规定在动画开始之前的延迟。
- [animation-iteration-count]规定动画应该播放的次数。
- [animation-direction]规定是否应该轮流反向播放动画。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
</body>
</html>
transition属性
- transition-property: 指定CSS属性的name，transition效果
- transition-duration: 效果需要指定多少秒或毫秒才能完成
- transition-timing-function: 指定transition效果的转速曲线(这个好玩)
- transition-delay:定义transition效果开始的时候
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
</body>
</html>
