CSS3动画怎么实现

发布时间:2022-03-09 15:44:10 作者:iii
来源:亿速云 阅读:137

本篇内容主要讲解“CSS3动画怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3动画怎么实现”吧!

    CSS3动画是什么

    动画是使元素从一种样式逐渐变化为另一种样式的效果。

    您可以改变任意多的样式任意多的次数。

    请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%。

    0%是动画的开始,100%是动画的完成。

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

    实例

    当动画为25%及50%时改变背景色,然后当动画100%完成时再次改变:

@keyframes myfirst

{

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

}

@-webkit-keyframes myfirst /* Safari 与 Chrome */

{

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

}

    实例

    改变背景色和位置:

@keyframes myfirst

{

    0%   {background: red; left:0px; top:0px;}

    25%  {background: yellow; left:200px; top:0px;}

    50%  {background: blue; left:200px; top:200px;}

    75%  {background: green; left:0px; top:200px;}

    100% {background: red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari 与 Chrome */

{

    0%   {background: red; left:0px; top:0px;}

    25%  {background: yellow; left:200px; top:0px;}

    50%  {background: blue; left:200px; top:200px;}

    75%  {background: green; left:0px; top:200px;}

    100% {background: red; left:0px; top:0px;}

}

到此,相信大家对“CSS3动画怎么实现”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. css3动画
  2. 初识css3动画

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:CSS3的3D转换方法是什么

下一篇:CSS3过渡是怎么工作的

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》