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. 铁乐学python_Day43_协程

    铁乐学python_Day43_协程 引子 之前我们学习了线程.进程的概念,了解了在操作系统中进程是资源分配的最小单位,线程是CPU调度的最小单位. 按道理来说我们已经算是把cpu的利用率提高很多了. ...

  2. (1)I/O流 (2)线程

    1.I/O流1.1 ObjectOutputStream类(重点)(1)基本概念 java.io.ObjectOutputStream类主要用于将Java对象整体写入到输出流中. 只能将支持 java ...

  3. 【Alpha】Daily Scrum Meeting 集合贴

    coding:https://git.coding.net/hmCoding/LearnTGP.git 11月14日:http://www.cnblogs.com/polk-blogs/p/78270 ...

  4. MySQL（27）：行锁、表锁、乐观锁、悲观锁

    1. 首先说一下:行锁 和 表锁  主要是针对锁粒度划分的. 一般分为:行锁.表锁.库锁 (1)行锁:访问数据库的时候,锁定整个行数据,防止并发错误. (2)表锁:访问数据库的时候,锁定整个表数据,防 ...

  5. Day4 MySql触发器视图索引以及设计优化

    触发器 MySQL包含对触发器的支持.触发器是一种与表操作有关的数据库对象,当触发器所在表上出现指定事件时,将调用该对象,即表的操作事件触发表上的触发器的执行. 通过事件触发,不能传参 语法 CREA ...

  6. Django提示Unknown database处理方法

    cmd.exe运行别人的程序 C:\Python27\Python.exe E:\Django\Guest\Guest\manage.py runserver 提示 django.db.utils.I ...

  7. sqoop数据导入命令 (sql---hdfs）

    mysql------->hdfs sqoop导入数据工作流程: sqoop提交任务到hadoop------>hadoop启动mapreduce------->mapreduce通 ...

  8. 在存放源程序的文件夹中建立一个子文件夹 myPackage。例如，在“D:\java”文件夹之中创建一个与包同名的子文件夹 myPackage（D:\java\myPackage）。在 myPackage 包中创建一个YMD类，该类具有计算今年的年份、可以输出一个带有年月日的字符串的功能。设计程序SY31.java，给定某人姓名和出生日期，计算该人年龄，并输出该人姓名、年龄、出生日期。程序使用YM

    题目补充: 在存放源程序的文件夹中建立一个子文件夹 myPackage.例如,在“D:\java”文件夹之中创建一个与包同名的子文件夹 myPackage(D:\java\myPackage).在 m ...

  9. nagios 在nrpe中自定义脚本

    监控第三方端口(22000) #!/bin/bash#author:xiaoweige#check 140 22000 result=`sleep 1|telnet 10.2.1.140 22000| ...

  10. bat设置windows计划任务

    设置定时任务 @echo off set NAME=dailybackup :: set DAY=MON,TUE,WED,THU,FRI,SAT,SUN set COMMAND=cscript.exe ...