属性 | 描述 |
---|---|
@keyframes | 规定动画模式。 from相当于0%,to相当于100% |
animation | 设置所有动画属性的简写属性。 |
animation-delay | 规定动画开始的延迟。 |
animation-direction | 定动画是向前播放、向后播放还是交替播放。
|
animation-duration | 规定动画完成一个周期应花费的时间。 ns/-ns,允许为负数
|
animation-fill-mode | 规定元素在不播放动画时的样式(在开始前、结束后,或两者同时)。 none(默认)/forwards/backwards/both |
animation-iteration-count | 规定动画应播放的次数。 infinite/n,允许为负数 |
animation-name | 规定 @keyframes 动画的名称。 |
animation-play-state | 规定动画是运行还是暂停。 paused/running @-webkit-keyframes mymove /* Safari and Chrome */ 带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本 兼容性需要添加一些前缀,需要注意测试 |
animation-timing-function | 规定动画的速度曲线。
|
简写:
animation:name dur3s linear delay2s infinite alternate
参考地址:https://www.w3school.com.cn/css/css3_animations.asp
示例:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
div:hover{
animation: example1 3s backwards ;
}
@keyframes example {
from {top: 200px;}
to {top: 0px; background-color: blue;}
}
@keyframes example1 {
from {top: 0px;}
to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>
<p>动画结束后,让 div 元素保留最后一个关键帧的样式值:</p>
<div></div>
<p><b>注释:</b>Internet Explorer 9 以及更早的版本不支持 animation-fill-mode 属性。</p>
</body>
</html>
translation 动画
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
transition 属性是一个简写属性,用于设置四个过渡属性:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
默认值all 0 ease 0,不继承