css3 @keyframes规则

原创 国哥笔记  2019-02-12 15:40  阅读 216 views 次

@keyframes规则定义及用法

在css中,@keyframes规则可以使用来创建动画,创建动画是通过逐步改变从一个CSS样式到另一个CSS样式,在动画过程中,您可以更改CSS样式的设定多次,指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同,0%是开头动画,100%是当动画完成。为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。

@keyframes规则是css3中新增规则,目前主流浏览器都支持该规则(加浏览器对应的前缀),但不兼容IE 9以及更早版本的浏览器。

@keyframes规则语法格式

@keyframes animationname {keyframes-selector {css-styles;}};

属性值说明

  • animationname:定义animation的名称;
  • keyframes-selector:动画持续时间的百分比,可能的值:0-100%、from (和0%相同)、to (和100%相同)。您可以用一个动画keyframes-selectors;
  • css-styles :一个或多个合法的CSS样式属性;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 @keyframes规则</title>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

运行结果:

css3 @keyframes规则

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-keyframes.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情