css animations 主要有两块构成,那么是哪两块呢?
  1. keyframes : 定义了什么阶段展示什么样的动画
  2. animation 属性 :把动画挂载到一个具体的dom上,并且定义如何动起来;
 

keyframes

keyframes 是动画的基础,它定义了动画在各个阶段的时间线上应该如何呈现。每一个 @keyframes 都应该包括下面:
  1. 动画的名字, 比如说, @ keyframes bounceIn
  2. 动画的各个阶段,0% 是最开始的阶段, 100%是最终的阶段,中间可以添加多个中间状态
  3. css的属性,在动画的各个阶段,css的属性分别是什么样的
下面是一个简单的 @keyframes :
  1. @keyframes bounceIn {
  2. 0%{
  3. transform: scale(0.1);
  4. opacity:0;
  5. }
  6. 60%{
  7. transform:scale(1.2);
  8. opacity:1
  9. }
  10. 100%{
  11. transform: scale(1);
  12. opacity:1
  13. }
  14. }
(如果你还对 css 强大的 transform 属性不熟悉的话,可以看我另外关于 transform 总结的教程, 强大的transform 配合 animation 简直就是魔法般的效果)
 

animation 属性

我们使用 @keyframes 声明好了一个动画, 但是还不够,我们要使用 animation 属性
animation 属性做了两件事情:
  1. 把动画添加到了你想添加的那个元素
  2. 定义动画是如何动起来的
所以,下面两个属性必须要添加到 dom 节点上: animation-name , animation-duration;
  1. div {
  2. animation-duration:2s;
  3. animation-name: bounceIn;
  4. }
为了更简洁的语法,我们推荐使用 合写 的写法:
  1. div {
  2. animation: bouncIn 2s;
  3. }
采用 合写 的写法,所有的动画属性,我们都要挂到 animation 这个属性下面:
  1. animation:[animation-name][animation-duration][animation-timing-function]
  2. [animation-delay][animation-iteration-count][animation-direction]
  3. [animation-fill-mode][animation-play-state];
请记住:要让动画正常的动起来,要按照上面的顺序来写,并且前两个属性是一定要有的。
 
为了构建更复杂的动画,需要再 将要运动的物体上 添加自定义属性:
animation-timing-function
设置缓动:ease( 默认 ) | ease-in | ease-out   
animation-delay
动画延迟了多少时间: 0 s( 默认 )
animation-interaction-count
动画要循环多少次:#(默认是1) | infinite | initial 
Animation-direction
动画要正着播,倒着播:normal( 默认 ) | reverse | alternate | alternate - reverse ( 后面两个的在animation-interaction-count>1的情况下起作用 )
animation-fill-mode
none(默认) | forwards | backwards | both
animation-play-state
running | pause  暂停后开始,是从之前位置无缝链接;
(animation-play-state :  不可以在animation 中简写,需要单独的加在要运动的动画身上)
 
你也可以在一个dom元素上增加多个 动画,他们之间只需要用 逗号隔开:
  1. .div {
  2. animation: slideIn 2s, rotate 1.75s;
  3. }
 
 
 
animation 和 transition 的效果是很像的;
animation 是 定义一个动画,然后挂载到要运动的物体身上;
transition 是把transition 的属性写在要变化的物体身上,然后hover的时候改变样式;
transition可以当成是只有两帧的animation;
 
transition 和 transfrom 单词长的是很像的;
transfrom 作用是 2d 3d 的转换,
transfrom的主要方法有:
  1. -webkit-transform :  translate ( 10px , 20px  )       // 常用在绝对定位的水平居中,垂直居中;
  2. -webkit-transform : rotate( 12deg )
  3. -webkit-transform : scale ( 1,3  )  宽度放大1倍,高度放大3倍
  4. -webkit-transform :  skew(30deg,60deg) 沿x轴旋转的角度,沿y轴旋转的角度
  5. transform-origin :  变换的基点
 
 
 
 
 

学习css3中的动画的更多相关文章

  1. CSS3中的动画功能(一)

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  2. css3中的动画功能

    直接用我的一段代码演示下css3中实现动画效果的事例,让一个div自动旋转起来 代码如下: <!doctype html> <html lang="en"> ...

  3. CSS3中的动画

    CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...

  4. CSS3中的动画效果-------Day72

    还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...

  5. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  6. css3中的动画效果

    css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...

  7. CSS3中的动画功能(二)

    上一篇文章讲解了css3动画中的一个即transitions,那么今天来说说另外一个animations.和transitions不同的是animations可以定义多个关键帧以及每个关键帧中元素的属 ...

  8. css3中的动画 @keyframes animation

    动画的运用比较重要.接下来我希望针对我自己学习遇到的问题,再总结一下这个属性的使用方法. 创建一个动画: @keyframes 动画名 {样式} 引用自己创建的动画: animation:动画名  时 ...

  9. 第100天:CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

随机推荐

  1. ios deprecated 警告消除 强迫症的选择

    #pragma clang diagnostic push #pragma clang diagnostic ignored "-Wdeprecated-declarations" ...

  2. windows升级到1607后操作很卡顿的解决办法

    CPU I5,固态128G,win7主系统,WIN10和WIN7都安装在固态硬盘上. 未升级之前,操作很流畅,以至于把家里的老古董电脑也换固态,系统换WIN10了.自从升级了1607后这个问题就出现了 ...

  3. php基础知识(二)---2017-04-14

    1.字符串的三种表达形式: (1)双引号 (2)单引号 (3)尖括号 $s = <<<A <div style="width:500px; height:100px; ...

  4. 快速排序算法回顾 --冒泡排序Bubble Sort和快速排序Quick Sort(Python实现)

    冒泡排序的过程是首先将第一个记录的关键字和第二个记录的关键字进行比较,若为逆序,则将两个记录交换,然后比较第二个记录和第三个记录的关键字.以此类推,直至第n-1个记录和第n个记录的关键字进行过比较为止 ...

  5. CGLIB和JDK代理

    需要的架包:在spring中提供对CGLIB的支持 一.JDK的动态代理 1.接口IUserDao package cn.itcast.spring3.jdk.proxy; public interf ...

  6. Load 数据1

    Druid 的load 数据分为两类 :批量load(历史数据) 和实时load(新数据) ,本文介绍批量load 数据 indexing 服务 批量load 数据需要用到indexing 服务,它是 ...

  7. zlog学习随笔

    zlog1使用手册 Contents Chapter 1  zlog是什么? 1.1  兼容性说明 1.2  zlog 1.2 发布说明 Chapter 2  zlog不是什么? Chapter 3  ...

  8. 使用vue-cli构建多页面应用+vux(二)

    当我们安装好vue-cli完整的项目以后,我们开始对它进行改造,此处参考了简书某个作者的,附上原文链接 http://www.jianshu.com/p/43697bdee974以及此文例子地址htt ...

  9. bzoj2876 [Noi2012]骑行川藏

    Description 蛋蛋非常热衷于挑战自我,今年暑假他准备沿川藏线骑着自行车从成都前往拉萨.川藏线的沿途有着非常美丽的风景,但在这一路上也有着很多的艰难险阻,路况变化多端,而蛋蛋的体力十分有限,因 ...

  10. [ext4]06 磁盘布局 - 特殊inode

    Ext4预留了一些inode做特殊特性使用,见下表: inode Purpose 0 不存在,Ext4中不存在inode 0. 1 存放损坏的数据块链表 2 根目录 3 User quota. 用户q ...