首页 >web前端 >css教程 > 正文

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

原创2019-06-04 18:02:5601343
phpStudy Linux 面板(小皮面板)
CSS3 @keyframes 规则

标签定义及使用说明

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

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

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

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

0%是开头动画,100%是当动画完成。(推荐学习:CSS3视频教程。)

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

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

语法

@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</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动画需要运用什么规则的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码
  • 相关标签:css3
  • 本文原创发布php中文网,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • HTML5和CSS3扁平化风格博客教程HTML5和CSS3扁平化风格博客教程
  • 妙味课堂CSS3视频教程妙味课堂CSS3视频教程
  • css3实现网页平滑过渡效果视频教程css3实现网页平滑过渡效果视频教程
  • 韩顺平 2016年 最新CSS3视频教程韩顺平 2016年 最新CSS3视频教程
  • 视频教程分类