本文摘自PHP中文网,作者(*-*)浩,侵删。
animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。注释:其属性值是由逗号分隔的一个或多个填充模式关键词。
语法
1 | animation-fill-mode : none | forwards | backwards | both;
|
值
| 描述
|
none
| 不改变默认行为。
|
forwards
| 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
|
backwards
| 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
|
both
| 向前和向后填充模式都被应用。
|
实例
为 h1 元素规定填充模式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
animation-fill-mode: forwards;
-moz-animation:myfirst 5s;
-webkit-animation:myfirst 5s;
-o-animation:myfirst 5s;
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst
{
from {background:red;}
to {background:yellow;}
|
以上就是css animation-fill-mode属性怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
怎么用css设置记录用户密码
什么是css,其主要作用是什么
css box-direction属性怎么用
css如何设置br高度
css如何清除下划线?css清除下划线有哪些方法
css指的是什么
css keyframes 是什么
css怎么隐藏下拉滚动条
css怎么自定义字体样式
css中line-height详解(代码实例)
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css animation-fill-mode属性怎么用