animation动画详解:制作颜色不停变化的正方形

讲解CSS3 animation动画属性,并通过实例《制作颜色不停变化的正方形》演示animation的使用。

animation  英[ˌænɪˈmeɪʃn] 美[ˌænəˈmeʃən]
n. 生气,活泼; 动画片制作,动画片摄制; [影视] 动画片;

CSS3 animation(动画) 属性

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

注意:Internet Explorer 9 及其之前的版本不支持 animation-direction 属性。

说明
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。

注意:

  • animation-name和animation-duration必须设置,其他可选
  • 通常根据不同内核的浏览器要加上不同的前缀,比如:chrome、safari:@-webkit-keyframes

在CSS选择器中,使用animition动画属性

声明一个动画(关键帧)格式如下:

@keyframes name{
    from{
    }
    to{
    }
}

@keyframes name{
    0%{
    }
    50%{
    }
        100%{
       }
}

①每个阶段用百分比表示,从0%到100%

②起止必须设置,即0%和100%或者from和to

例子:用animation属性制作颜色不停变化的正方形

1、定义一个动画

@-webkit-keyframes myframe{
                0%{
                    background-color: #7FFFD4;
                }
                25%{
                    background-color: coral;
                }
                50%{
                    background-color: cornflowerblue;
                }
                100%{
                    background-color: cyan;
                }
            }

2、在网页添加div

<div class="div1"></div>

3、给div定义属性

.div1{
                width: 500px;
                height: 500px;
                background-color: #7FFFD4;
                -webkit-animation: myframe 5s ease infinite;
            }

完整实例

Tips:You can change the code before run.

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1160.html

(1)
江山如画的头像江山如画管理团队
上一篇 2018年2月7日 下午8:27
下一篇 2018年2月8日 下午12:51

99%的人还看了以下文章

  • 推荐:只有569KB的专业网页木马查杀工具(绿色免安装)

    一款只有569KB的专业网页木马查杀工具,永久免费,绿色软件,无须安装,下载后即可双击使用。支持本地快速查杀、远程FTP查杀和实时查杀三种模式。

    2018年2月12日
    5.2K0
  • CSS3 制作精美圆角立体button

    CSS3 制作的精美圆角立体button,你可以改变代码,制作出自己需要的颜色和样式的按钮,点击下方运行查看效果。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l…

    2018年2月3日
    3.7K0
  • wordpress成功更新5.3,解决无法在线更新,手动更新后编辑器无法使用等问题

    今天125网页设计升级了网站主题,发现后台无法使用了,问了售后说是要wordpress5.0以上版本才支持。 于是开始升级wordpress黑暗的一天到来了…… WordPress 5.3 正式版于北京时间2019年11月13日 发布 在线升级wordpress,先后遇到各种问题,耗时一天才解决,也给升级wordpress 5.3的朋友们分享,避免掉进各种坑…

    2019年11月28日
    8.1K0
  • css语法及命名规范(入门)

    css语法规范: 每条属性声明占一行,增加易读性 /*bad*/ body{margin: 0;padding: 0;} /*good*/ body{ margin: 0; padding: 0; } 颜色采用十六进制写法,并尽量简写: /*bad*/ .example{ color: #ffaabb; } /*good*/ .example{ color:…

    2018年7月10日
    2.9K0
  • 你只懂CSS?做前端你还要会 Less、Sass或Stylus

    网站前端开发,CSS是必备的知识,但随着WEB项目越来越大,CSS的预处理越来越重要。 为什么需要CSS的预处理? CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等,要维护我们的CSS,工作会越来越困难,这就需要选择一个预处理工具来编译我们的CSS。 less 本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样…

    2018年7月27日
    5.1K0
  • css实现圆角矩形、半圆、圆形效果—border-radius使用详解

    传统的圆角矩形实现,必须使用多张图片作为背景图案。CSS3的border-radius属性使得我们再也不必浪费时间去制作这些图片了。 css实现圆角矩形、半圆、圆形效果的优点: * 减少维护的工作量,不再需要使用图片。 * 提高网页性能,网页的载入速度将变快。 * 增加视觉可靠性。某些情况下,背景图片会下载失败,CSS3就不会发生这种情况。   b…

    2018年2月3日
    14.4K0

发表回复

登录后才能评论