cari

Rumah  >  Artikel  >  hujung hadapan web  >  CSS3中的animation-name属性怎么用

CSS3中的animation-name属性怎么用

青灯夜游
青灯夜游asal
2019-01-31 10:37:144294semak imbas

CSS3中的animation-name属性的用法：【animation-name: keyframename|none】。该属性用来给@keyframes动画规定名称。

CSS3中的animation-name属性怎么用

css3 animation-name属性

作用：animation-name 属性为 @keyframes 动画规定名称。

语法：

animation-name: keyframename|none;

keyframename：规定需要绑定到选择器的 keyframe 的名称。

none：规定无动画效果（可用于覆盖来自级联的动画）。

注：需始终设置 animation-duration 属性，否则当时长为 0时，就不会播放动画了。

css3 animation-name属性的使用示例

<!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>

效果图：

1.gif

以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！

Atas ialah kandungan terperinci CSS3中的animation-name属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php css3 选择器 animation
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css3 animation属性怎么用Artikel seterusnya：animation-duration属性有什么用

Artikel berkaitan

Lihat lagi