CSS3动画分为二部份：

1、定义动画行为：

使用@keyframes定义动画行为，有两种方式：

方式一：仅定义动画起始样式，与动画结束样式

 @keyframes (动画行为名称)

 {

 from {background: red;}

 to {background: yellow;}

 }

 @-moz-keyframes (动画行为名称)

 {

 from {background: red;}

 to {background: yellow;}

 }

 @-webkit-keyframes (动画行为名称)

 {

 from {background: red;}

 to {background: yellow;}

 }

 @-o-keyframes (动画行为名称)

 {

 from {background: red;}

 to {background: yellow;}

 }

方式二：定义动画进展中的每步样式，百分比表示动画执行的进度百分值

 @keyframes (动画行为名称)

 {

 0%   {background: red;}

 25%  {background: yellow;}

 50%  {background: blue;}

 100% {background: green;}

 }

 @-moz-keyframes (动画行为名称)

 {

 0%   {background: red;}

 25%  {background: yellow;}

 50%  {background: blue;}

 100% {background: green;}

 }

 @-webkit-keyframes (动画行为名称)

 {

 0%   {background: red;}

 25%  {background: yellow;}

 50%  {background: blue;}

 100% {background: green;}

 }

 @-o-keyframes (动画行为名称)

 {

 0%   {background: red;}

 25%  {background: yellow;}

 50%  {background: blue;}

 100% {background: green;}

 }

2、定义动画执行方式。

将动画的行为附加到元素上，使其按照此规则执行动画效果，但我们还要给动画设定执行方式，比如什么动画让它多长时间完成，是否循环执行动画等。

动画执行方式语法：

 animation: name duration timing-function delay iteration-count direction;

语法中译：

 animation:

     动画行为名称，在keyframes内定义的名称

     动画周期，比如 5s 表示5秒完成此动画一次

     动画的速度曲线， linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

     动画何时开始，默认值0，立刻播放

     动画被播放的次数，默认值1，值infinite 表示一直循环播放

     动画是否在下一周期逆向地播放，可选值：  normal（默认，不逆向地播放）  | alternate（动画应该轮流反向播放）

3、可以通过增加CSS样式：animation-play-state 来控制CSS3动画暂停与播放

 animation-play-state: paused | running;

 -webkit-animation-play-state: paused | running ;

代码演示:

 <!DOCTYPE html>

 <html lang="zh-cmn-Hans">

 <head>

 <meta charset="utf-8">

 <style>

     a{width:100px;height:30px;display:block;}

     @keyframes myan{

         0%    {background:#066;left:20px;top:20px;}

         50% {background:#090;left:100px;top:100px;}

         100% {background:#093;left:300px; top:300px;}

     }

     #a{

         position:absolute;

         animation: myan 5s linear 2s infinite  alternate;

     }

     #a:hover{

           /* 这里使动画停止了 */

         animation-play-state:paused;

       }

 </style>

 </head>

 <body>

 <div style="position:relative;margin:50px;width:100px;height:100px;background:#ccc;">

     <a href="#" id="a">1111111</a>

     </div>

 </body>

 </html>

CSS3 ：animation 动画的更多相关文章

  1. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  2. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  3. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

  4. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

  5. css3 animation(动画)笔记

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...

  6. css3 animation 动画属性简介

    animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...

  7. css3 animation动画事件

    当使用css3时,会遇到利用@keyframes来定义动画事件,利用以下3个事件,能够捕捉当前元素的动画: AnimationEnd //动画结束时 AnimationStart  //动画開始 An ...

  8. CSS3 animation动画，循环间的延时执行时间

    如下代码,其中的delay值为3s,但是animation按现在的规则,这个delay是指动画开始前的延时,在动画循环执行间,这个delay是不生效的. .item{ webkit-animation ...

  9. css3 animation动画使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 关于css3 Animation动画

    在介绍animation之前有必要先来了解一个东西,那就是“keyframes”,我们把他叫做“关键帧”: 在使用transition制作一个简单的transition效果时,包括了初始属性,最终属性 ...

随机推荐

  1. 用jquery写的json省市县三级联动下拉

    <form action="#" name="myform"> <label>省</label><select nam ...

  2. Docker 安装tomcat7

    [root@VM_0_7_centos ~]# docker pull tomcat:7-jre7 [root@VM_0_7_centos ~]# docker run -di --name=tomc ...

  3. 使用vue自定义组件以及动态时间

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 使用xlsx把json对象导出excel

    1,首先使用npm下载xlsx.执行命令 npm install xlsx --save import { Component, OnInit } from '@angular/core'; //im ...

  5. 【前行】◇第3站◇ Codeforces Round #512 Div2

    [第3站]Codeforces Round #512 Div2 第三题莫名卡半天……一堆细节没处理,改一个发现还有一个……然后就炸了,罚了一啪啦时间 Rating又掉了……但是没什么,比上一次好多了: ...

  6. chromium之non_thread_safe

    先看看介绍 // A helper class used to help verify that methods of a class are // called from the same thre ...

  7. spring cloud 学习之路由网关（zuul）

    学习自方志朋的博客 http://blog.csdn.net/forezp/article/details/69939114 在微服务架构中,需要几个基础的服务治理组件,包括服务注册与发现.服务消费. ...

  8. PyCharm入门第一步-——创建并运行第一个Python项目

    创建项目 点击Create New Project 创建项目 输入自己的项目名,点击Create创建 创建文件 右键项目名创建python文件 创建一个HelloPython文件 输入print(&q ...

  9. pyecharts的简单使用

    由于需要在项目中展示数据,查了查资料发现,pyecharts模块在网页数据展示方面有很大优势,所以就学了点pyechas 参考博客:Python:数据可视化pyecharts的使用 - JYRoy - ...

  10. 基于jQuery的2048小游戏设计（网页版）

    上周模仿一个2048小游戏,总结一下自己在编写代码的时候遇到的一些坑. 游戏规则:省略,我想大部分人都玩过,不写了 源码地址:https://github.com/xinhua6/2048game.g ...