提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css animation-fill-mode属性怎样用【css教程】,css

animation-fill-mode 属性划定动画在播放之前或以后,其动画结果是不是可见。

解释:其属性值是由逗号分开的一个或多个添补形式关键词。

语法

animation-fill-mode : none | forwards | backwards | both;

形貌
none 不转变默许行动。
forwards 当动画完成后,坚持末了一个属性值(在末了一个关键帧中定义)。
backwards 在 animation-delay 所指定的一段时间内,在动画显现之前,运用最先属性值(在第一个关键帧中定义)。
both 向前和向后添补形式都被运用。

实例

为 h1 元素划定添补形式:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
animation-fill-mode: forwards;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}

以上就是css animation-fill-mode属性怎样用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css animation-fill-mode属性怎样用【css教程】,css"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线