• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • animation-name

    版本:CSS3

    animation-name属性指定应用的一系列动画,每个名称代表一个由@keyframes定义的动画序列。

    示例

    /* single animation */
    animation-name: none;
    animation-name: test_05;
    animation-name: -specific;
    animation-name: sliding-vertically;
    
    /* multiple animations */
    animation-name: test1, animation4;
    animation-name: none, -moz-specific, sliding;
    
    /* global values */
    animation-name: initial
    animation-name: inherit
    animation-name: unset

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本的浏览器都支持animation-name

    语法

    animation-name:none| IDENT

    取值

    • none:特殊关键字,表示无关键帧。可以不改变其他标识符的顺序而使动画失效,或者使层叠的动画样式失效。
    • IDENT:标识动画的字符串,由大小写敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母,数字不能在字母前面,不允许两个横线出现在开始位置。
    默认值none
    适用于所有元素,包含伪对象::beforeand::after
    继承性
    动画性
    计算值指定值
    媒体交互

    实例

    <style type="text/css">
    div{
    	width:100px;
    	height:100px;
    	position:relative;
    	background-color:hsl(120,65%,75%);
    	animation:demo 5s 1;
    	-webkit-animation:demo 5s 1;
    	}
    @keyframes demo
    {
     from{left:0px;}
     to{left:350px;
    }
    }
    /*safari和chrome*/
    @-webkit-keyframes demo
    {
     from{left:0px;}
     to{left:350px;}
    }
    </style>
    </head>
    <body>
    	<div></div>	
    </body>

    效果图:

    上篇:animation

    下篇:animation-fill-mode