运用css3动画需要运用哪些规则

本文小编为大家详细介绍“运用css3动画需要运用哪些规则”，内容详细，步骤清晰，细节处理妥当，希望这篇“运用css3动画需要运用哪些规则”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

公司主营业务：成都网站制作、网站建设、外贸网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联建站是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联建站推出台江免费做网站回馈大家。

标签定义及使用说明

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

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

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

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

0％是开头动画，100％是当动画完成。（推荐学习：CSS3视频教程。）

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

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

语法

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

值

说明

animationname

必需的。定义animation的名称。

keyframes-selector

必需的。动画持续时间的百分比。

合法值：

0-100%

from(和0%相同)

to(和100%相同)

注意：您可以用一个动画keyframes-selectors。

css-styles

必需的。一个或多个合法的CSS样式属性

实例：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<style>

div

{

width:100px;

height:100px;

background:blue;

position:relative;

animation:mymove5sinfinite;

-webkit-animation:mymove5sinfinite;/*SafariandChrome*/

}

@keyframesmymove

{

0%{top:0px;background:blue;width:100px;}

100%{top:200px;background:yellow;width:300px;}

}

@-webkit-keyframesmymove/*SafariandChrome*/

{

0%{top:0px;background:blue;width:100px;}

100%{top:200px;background:yellow;width:300px;}

}

</style>

</head>

<body>

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

</body>

</html>

读到这里，这篇“运用css3动画需要运用哪些规则”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。

当前名称：运用css3动画需要运用哪些规则
网址分享：https://www.cdcxhl.com/article6/jpcgog.html

成都网站建设公司_创新互联，为您提供、商城网站、网站建设、微信小程序、搜索引擎优化、网站营销

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容