search

Home  >  Article  >  Web Front-end  >  How to use the animation-name attribute in CSS3

How to use the animation-name attribute in CSS3

青灯夜游
青灯夜游Original
2019-01-31 10:37:144295browse

Usage of animation-name attribute in CSS3: [animation-name: keyframename|none]. This attribute is used to specify a name for the @keyframes animation.

How to use the animation-name attribute in CSS3

##css3 animation-name attribute

Function: animation The -name attribute specifies the name for the @keyframes animation.

Syntax: 

animation-name: keyframename|none;

keyframename: Specifies the name of the keyframe that needs to be bound to the selector.

none: Specifies no animation effect (can be used to override animations from the cascade).

Note: The animation-duration attribute must always be set, otherwise when the duration is 0, the animation will not be played.

css3 animation-name attribute usage example

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;

/* Safari and Chrome */
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-name 属性。</p>

<div></div>

<p><b>注释：</b>始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。</p>

</body>
</html>

Rendering:


How to use the animation-name attribute in CSS3

The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of How to use the animation-name attribute in CSS3. For more information, please follow other related articles on the PHP Chinese website!

php css3 选择器 animation
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use css3 animation propertyNext article：How to use css3 animation property

Related articles

See more