运用css3动画需要运用什么规则

2019年5月31日18:00:13 发表评论 12 浏览

CSS3 @keyframes 规则

运用css3动画需要运用什么规则

标签定义及使用说明

使用@keyframes规则,你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中,您可以更改CSS样式的设定多次。

指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。

0%是开头动画,100%是当动画完成。

为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。

注意: 使用animation属性来控制动画的外观,还使用选择器绑定动画。.

语法

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

推荐课程:CSS3教程。

说明
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</title> 
    <style> 
        div
        {
        width:100px;
        height:100px;
        background:blue;
        position:relative;
        animation:mymove 5s infinite;
        -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
        }
        
        @keyframes mymove
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
        
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
    </style>
</head>
<body>

<p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

以上就是运用css3动画需要运用什么规则的详细内容,更多请关注洋洋博客其它相关文章!

运用css3动画需要运用什么规则

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: