Y(^o^)Y

css动画大乱弹之animation。

概述

什么是animation呢？在回答这个问题之前，先要说明什么叫做@keyframe（关键帧）。@keyframe算是一个动画模板。在其中，可以使用百分比，如从0%到100%的任意值，分别在每个百分比中，加上不同的属性，从而让元素达到一种在不断变化的动画效果。这和我们制作flash动画一样，我们只需设计几个关键帧，系统就能生成动画啦！

一个@keyframe例子：

 /*定义关键帧动画*/

     @keyframes myframe {

        0%{

            width: 100px;

            height: 100px;

            border-radius: 50%;

        }

         50%{

             width: 200px;

             height: 200px;

             border-radius: 50%;

         }

         100%{

             width: 100px;

             height: 100px;

             border-radius: 50%;

         }

     }

分别定义了动画0%（开始时），50%（播放一半时），100%（播放结束时）的效果，浏览器就能直接生成动画了。

ok，回到上面的问题：什么是animation？animation就是利用关键帧来设置动画的一个工具。可以这么想，关键帧就是一个“动画模型”，animation就是“播放器模型”。

animation的常用属性

1.animation-name: @keyframe动画的名称。

2.animation-duration: 动画完成一个周期需要的时间，默认是0。

3.animation-timing-function:动画的速度趋势（缓动效果），默认是ease。

4.animation-delay: 动画开始的延迟时间，默认是0。

5.animation-iteration-count: 动画播放的次数，默认是1。可以使用数字，也可以使用“infinite”，表示无限次循环播放。

6.animation-direction: 动画下一次播放的顺序，可以顺序或逆序，默认是"normal"。

7.animation-play-state: 动画是否正在运行或暂停，默认是"running"。

8.animation-fill-mode: 对象动画时间之外的状态。

animation与transition的区别

animation是针对@keyframe而言的，它只是在事件发生时触发动画，但是并不改变原来的属性，当事件完成，又恢复原样。transition强调是过渡动画，它是确确实实改变了属性。

实例

在浏览器中央有一个红色的正方形，鼠标放上去，变为圆形。鼠标移除，变为正方形。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>animation</title>

 </head>

 <style type="text/css">

     .box{

         width: 100px;

         height: 100px;

         margin: 50px auto;                              /*水平居中*/

         background-color: #f00;                         /*设置红色*/

     }

     .box:hover{

        animation-name:myframe;                         /*要使用的关键帧动画的名称*/

         animation-delay: 100ms;                        /*鼠标放上后延迟100ms发生动画*/

         animation-duration: 1s;                        /*动画持续一秒*/

        animation-timing-function:ease-in;              /*加速播放*/

        animation-iteration-count: infinite;            /*循环播放*/

     }

     /*定义关键帧动画*/

     @keyframes myframe {

        0%{

            width: 100px;

            height: 100px;

            border-radius: 50%;

        }

         50%{

             width: 200px;

             height: 200px;

             border-radius: 50%;

         }

         100%{

             width: 100px;

             height: 100px;

             border-radius: 50%;

         }

     }

 </style>

 <body>

 <div class="box"></div>

 </body>

 </html>

CSS动画效果之animation的更多相关文章

  1. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  2. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  3. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

  4. CSS动画效果

    CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...

  5. css 动画效果

    要搞就搞明白,一知半解时停止研究 损失最大     css3意义: CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点 ...

  6. css动画——transition和animation

    http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...

  7. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  8. react中使用css动画效果

    index.js import React, { Component, Fragment } from 'react'; class App extends Component { construct ...

  9. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

随机推荐

  1. [转载]Matlab中插值函数汇总和使用说明

    http://blog.sciencenet.cn/blog-457143-679275.html MATLAB中的插值函数为interp1,其调用格式为:  yi= interp1(x,y,xi,' ...

  2. lsync目录文件实时同步工具

    参考文档:https://vastxiao.github.io/article/2017/09/02/Linux/lsyncd_usage/ 防止连接丢失,已保存至百度网络-郑州-XXXXX 建议首先 ...

  3. list(range())--------range创建一个list列表 遍历索引range(len()) 和 list(range())创建列表

    lst = list(range(15,26)) #注,list(range())用的是小括号哦print(lst)

  4. Language-Directed Hardware Design for Network Performance Monitoring——Marple

    网络监控困难 1.仅仅通过去增加特定的监控功能到交换机是不能满足运营商不断变化的需求的.(交换机需要支持网络性能问题的表达语言) 2.他们缺乏对网络深处的性能问题进行本地化的可见性,间接推断网络问题的 ...

  5. 面向对象程序设计_Task4_Calculator1.1

    The 2nd part of the Calculator program 题目链接:Click Here github链接:Click Here 诶嘿,第二部分,要开始实现计算的功能了,估计离不是 ...

  6. [错误记录]python requests库 Response 判断坑

    在requests访问之后, 我直接判断resp的值, 如下: if resp: do something 发现当Response 为500的时候没有进入if分支, 检查源码,发现Response重写 ...

  7. Python的multiprocessing,Queue，Process

    在多线程multiprocessing模块中,有两个类,Queue(队列)和Process(进程): 在Queue.py中也有一个Queue类,这两个Queue的区别? from multiproce ...

  8. Centos7.3 坑爹网络配置

    1.目的: 我想在Vmvare配置成NAT模式的上网,因为这个模式宿主机可以访问虚拟机,虚拟机也可以访问宿主机,但仅主机模式只能是宿主机能访问虚拟机,但虚拟机不能访问宿主机.所以我为了能在虚拟机里面上 ...

  9. jquery与json的结合

    通过AJAX异步减少网络内容传输,而JSON则可以把传输内容缩减到纯数据:然后利用jQuery内置的AJAX功能直接获得JSON格式的数据:在客户端直接绑定到数据控件里面,从而达到最优. 1 2 3 ...

  10. Java基础知识强化107：DecimalFormat

    1. 引入: 如何控制输出数据的精度? >1. 使用Math.round方法 (1)Java如何把一个float(double)四舍五入到小数点后2位,4位,或者其它指定位数 ? 答:比如,如下 ...