Rumah > Artikel > hujung hadapan web > css @keyframes规则怎么用
css @keyframes规则怎么用
- 青灯夜游asal
- 2019-05-30 16:25:523955semak imbas
@keyframes是CSS的一种规则，可以用于定义CSS动画的一个周期的行为；需要和animation属性一起使用，创建简单的动画效果。请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
css @keyframes规则怎么用？
通过 @keyframes 规则，能够创建动画。
语法
@keyframes animationname {keyframes-selector {css-styles;}}animationname：必需的。定义animation的名称。
keyframes-selector：必需的。动画持续时间的百分比。
合法值：
● 0-100%
● from (和0%相同)
● to (和100%相同)
css-styles 必需的。一个或多个合法的CSS样式属性
说明：
创建动画的原理是：将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
css @keyframes属性 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>
<p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p>
<div></div>
</body>
</html>效果图：
Atas ialah kandungan terperinci css @keyframes规则怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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：css nav-up属性怎么用Artikel seterusnya：css border-image-width属性怎么用