animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强。

配置animation

animation-delay:从加载到开始执行的延迟

animation-direction:normal|reverse|alternate|alternate-reverse   参考

normal:往前执行,完成后又回到原点

reverse:和定义的方向相反,完成后回到原点开始执行

alertnate:先往前到最后,又从最后往前执行,看上去比较顺滑

animation-duration:持续时间

animation-iteration-count:重复次数(infinite 无限)

animation-name:@keyframes定义的名称,描述每帧内元素的表现

animation-play-state:终止或者重新开始animation序列

animation-timing-function:定义运动曲线的function

animation-fill-mode:参考

用keyframes定义animation顺序

定义一系列的keyframe来描述元素在被给的时间内应该怎么表现。两个最重要的状态就是0%(最初状态)和100%(终止状态)别名是from和to,这两个状态是可选的,如果没有指定,就用当前元素计算出来的值。

例子:

h1 {
-webkit-animation-duration: 3s;
-webkit-animation-name: slidein;
} @-webkit-keyframes slidein {
from {
margin-left: %;
width: %;
} to {
margin-left: %;
width: %;
}
}

<h1>Watch me move</h1>
  <p>This example shows how to use CSS animations to make <code>H1</code> elements move across the page.</p>

@keyframes定义了slidein,有两个状态0%和100%。最初状态 margin-left: 100%;width: 300%,3s后margin-left:0%;width:100%;

animation事件

animationstart animation开始

animationend 结束

animationiteration 新的循环开始

事件有两个属性 animationName  和 elapsedTime(运行时间)

css3动画-animation的更多相关文章

  1. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  2. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  3. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  4. CSS3 动画 animation和@keyframes

    CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...

  5. CSS3动画animation认识,animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

  6. css3动画animation

    动画:animation   animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...

  7. CSS3 动画Animation的8大属性

    animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...

  8. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  9. CSS3动画详解(结合实例)

    一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...

随机推荐

  1. java中io对文件操作的简单介绍

    11.3 I/O类使用 由于在IO操作中,需要使用的数据源有很多,作为一个IO技术的初学者,从读写文件开始学习IO技术是一个比较好的选择.因为文件是一种常见的数据源,而且读写文件也是程序员进行IO编程 ...

  2. Course

          Coursera计算机专业课程列表 巴黎中央理工学院人工视觉中的离散推理和学习  教授  Nikos Paragios & Pawan Kumar Jan 10th 2014  8 ...

  3. java 面向抽象编程的思想

    SIM.java public abstract class SIM { public abstract void setNumber(String n); public abstract Strin ...

  4. “玲珑杯”ACM比赛 Round #1 题解

    A:DESCRIPTION Eric has an array of integers a1,a2,...,ana1,a2,...,an. Every time, he can choose a co ...

  5. MFC添加背景图片三种方法

    方法一: 1.声明成员变量CBrush m_brush;2.在InitDialog中添加代码: ? CBitmap bmp; bmp.LoadBitmap(IDB_BITMAP1);  //IDB_B ...

  6. 对Viewcontroller在UINavigationController中入栈出栈的一点点理解

    转载自:http://blog.csdn.net/intheair100/article/details/41119073 wait_record_arr 在viewdidload里面被alloc,如 ...

  7. vim的复制粘贴小结(转)

    原文地址:http://lsong17.spaces.live.com/blog/cns!556C21919D77FB59!603.entry 内容: 用vim这么久 了,始终也不知道怎么在vim中使 ...

  8. 删除DriverStore\FileRepository文件夹后,设备驱动无法安装,提示“没有为设备信息集或元素选择驱动程序(代码 28)”的解决办法

    前言: 我前几天手贱,整个FileRepository删除掉了,之后重启就出现了让人蛋疼的这个问题,因为出于各种原因不想重装系统,百度轮番换搜索词无果,虽然驱动装上了但新设备依然无法自动安装驱动等“一 ...

  9. 深入浅出Ajax(三)

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  10. PS2鼠标+LCD12864实验——终于OK 了

    抱着“不气馁.不放弃.誓不罢休.搞不定你我还能搞其他玩意吗”的心态,调试许久的PS2鼠标实验,终于在今天被我搞定了.发几张图显摆一下,嘿嘿...    左键按下+鼠标移动 右键按下+鼠标移动  中键按 ...