animation-name

属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列

值:
none
特殊关键字，表示无关键帧。
keyframename
标识动画的字符串

  1. animation-nanme:move;

animation-duration属性指定一个动画周期的时长。
默认值为0s，表示无动画。

值
一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。
注意：负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s

  1.  animation-duration: 3s;

animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。
对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始，到关键帧结束。

动画的默认效果：由慢变快再变慢

linear:线性过渡，等同于贝塞尔曲线（0,0,1,1）
ease:平滑过渡，等同于贝塞尔曲线（0.25,0.1,0.25,1.0）
ease-in:由慢到快，等同于贝塞尔曲线（0.42,0,1,1）
ease-out:由快到慢，等同于贝塞尔曲线（0,0,0.58,1）
ease-in-out:由慢到快再到慢，等同于贝塞尔曲线（0.42,0,0.58,1）
cubic-bezier(1,1,2,3)

  1.   /*           运动线性*/
  2.              animation-timing-function:linear;

steps(n,[start|end])
传入一到两个参数，第一个参数意思是把动画分成 n 等分，然后动画就会平均地运行。
第二个参数 start 表示从动画的开头开始运行，相反，end 就表示从动画的结尾开始运行，
默认值为 end。

animation-delay:3s定义动画开始前等待的时间,以秒或毫秒计(属于动画外的范畴)

值:
<time>
从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(m s)。如果未设置单位，定义无效

  1.            /*  运动缓存时间*/
  2.              animation-delay: 3s;

animation-iteration-count: infinite;

定义了动画执行的次数（属于动画内的范畴）

值
infinite
无限循环播放动画.
<number>
动画播放的次数 不可为负值.

animation-direction:

定义了动画执行的方向

值
normal
每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始， 这是默认属性。
alternate
动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向， 比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭 代
reverse
反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse
反向交替， 反向开始交替

  1.               /* 运动方向*/
  2.                animation-direction:reverse;
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.           *{
  8.                margin: ;
  9.                padding: ;
  10.           }
  11.           #wrap{
  12.               position: relative;
  13.             margin: 200px auto;
  14.               width: 300px;
  15.               height: 300px;
  16.               border: 1px solid;
  17.           }
  18.           #test{
  19.               position:absolute;
  20.               left:%;
  21.               top: %;
  22.           /*    transform: translate3d(-50%,-50%,0);*/
  23.             margin-left: -50px;
  24.             margin-top: -50px;
  25.               width: 100px;
  26.               height: 100px;
  27.               background: red;
  28.             border-radius:%;
  29.           /*  定义动画名称*/
  30.             animation-name:move;
  31.             text-align: center;
  32.              line-height: 100px;
  33.              /*定义动画运动到结束时间*/
  34.              animation-duration: 8s;
  35.   /*           运动线性*/
  36.              animation-timing-function:linear;
  37.            /*  运动缓存时间*/
  38.              animation-delay: 3s;
  39.  
  40.              /*动画内的属性*/
  41.             /* 运动次数*/
  42.              animation-iteration-count: infinite;
  43.               }
  44.               /* 运动方向*/
  45.                animation-direction:reverse;
  46.               @keyframes move{
  47.                   from{transform:rotate(0deg);}
  48.                   to{transform:rotate(360deg);}
  49.               }
  50.  
  51.         </style>
  52.     </head>
  53.     <body>
  54.         <div id="wrap">
  55.             <div id="test"></div>
  56.         </div>
  57.     </body>
  58. </html>

animation-fill-mode:forwards;

* backwards：from之前的状态与form的状态保持一致
* forwards：to之后的状态与to的状态保持一致
* both：backwards+forwards

  1.     animation-fill-mode: both;
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.  
  8.             *{
  9.                 margin: ;
  10.                 padding: ;
  11.             }
  12.  
  13.             #wrap{
  14.                 position: relative;
  15.                 margin: 200px auto;
  16.                 width: 300px;
  17.                 height: 300px;
  18.                 border: 1px solid;
  19.             }
  20.             #test{
  21.                 position: absolute;
  22.                 left: %;
  23.                 top: %;
  24.                 /*transform: translate3d(-50%,-50%,0);*/
  25.                 margin-left:-50px;
  26.                 margin-top: -50px;
  27.                 width: 100px;
  28.                 height: 100px;
  29.                 background: pink;
  30.                 text-align: center;
  31.                 font: 20px/100px "微软雅黑";
  32.  
  33.                 /*动画内的属性*/
  34.                 animation-name: move;
  35.                 animation-duration:3s ;
  36.                 animation-timing-function: linear;
  37.                     /*反转的是关键帧和animation-timing-function*/
  38.                 animation-direction:normal;
  39.                 /*动画外的属性*/
  40.                 animation-delay:1s;
  41.  
  42.                 /*只作用于动画内的属性*/
  43.                     /*重复的是关键帧*/
  44.                 animation-iteration-count: ;
  45.  
  46.                 /*元素在动画外的状态
  47.  
  48.                  *
  49.                  * backwards：from之前的状态与form的状态保持一致
  50.                  * forwards：to之后的状态与to的状态保持一致
  51.                  * both：backwards+forwards
  52.                  * */
  53.  
  54.                 animation-fill-mode: both;
  55.                 animation-play-state: running;
  56.             }
  57.  
  58.             @keyframes move{
  59.                 from{
  60.                     transform: translateY(-100px);
  61.                 }
  62.                 to{
  63.                     transform: translateY(100px);
  64.                 }
  65.             }
  66.  
  67.             #wrap:hover #test{
  68.                 animation-play-state: paused;
  69.             }
  70.         </style>
  71.     </head>
  72.     <body>
  73.         <div id="wrap">
  74.             <div id="test">邱海峰</div>
  75.         </div>
  76.     </body>
  77. </html>

css---动画封装的更多相关文章

  1. amazeui学习笔记--css（常用组件15）--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

  2. CSS 动画一站式指南

    CSS 动画一站式指南 目录 CSS 动画一站式指南 1. CSS 动画 1.1 变换 1.1.1 变换属性介绍 1.1.2 变换动画实践 1.2 过渡 1.2.1 过渡属性介绍 1.2.2 过渡动画 ...

  3. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  4. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

  5. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  6. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  7. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  8. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  9. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  10. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

随机推荐

  1. Chrome调试小技巧

    前言: 除了我们日常使用的调试方法,在Chrome中,其含有一些有意思的方法,有助于提高我们的开发调试效率. Sources页 command + p 文件跳转 使用Sublime的人或习惯用comm ...

  2. HTML中<frameset>标签不显示的问题

    啥都不说,先上代码 <html> <head> <title>index</title> <meta content = 'text/html'; ...

  3. jenkins+jhipster集成

    准备工作: 安装Jenkins 新建一个Jhipster项目 开始集成: 新建一个Jenkins构建项目 只配置源代码 构建,成功,稍微有点信心了 配置执行构建脚本 ./mvnw package -P ...

  4. sublime里面几个个人觉得比较实用的快捷键

    Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同的变量名.函数名等. Ctrl+L 选中整行,继续操作则继续选择下一行,效果和 Shift+ ...

  5. oracle密码过期，改为原来的密码

    我们都知道Oracle 数据库的用户的密码默认是有有效期限制的,特别是在Cloud上面的DB,有些用户是Cloud自动创建的,我们不知道原来的密码是什么,但是如果密码过期了,如果修改成新的密码,会影响 ...

  6. Tools: windbg 使用指南

    windbg使用 符号表C:\Symbols; SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols 系统变量_NT_SYMBOL_PAT ...

  7. C语言 常量

    常量的定义:在运行过程中,其值不能改变的量称为常量. 常量的分类 整型常量  实型常量  字符常量 demo #include <stdio.h> void main() { printf ...

  8. jq-demo-点击选择（英雄联盟）

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

  9. python从字符串中提取数字_filter

    my_str = '123and456' number = filter(str.isdigit, my_str ) # number = 123456 使用正则表达式: >>> i ...

  10. 对每一个IO操作的返回都要进行判断

    对每一个IO操作的返回都要进行判断 我们业务代码中有很多进行mysql.redis.文件.curl等的io操作,对每一个io操作我们都要对其返回值进行判断,然后做对应的处理,加日志信息或者抛出异常状态 ...