animation-name

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

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

animation-nanme:move;

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

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

 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)

  /*           运动线性*/

             animation-timing-function:linear;

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

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

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

           /*  运动缓存时间*/

             animation-delay: 3s;

animation-iteration-count: infinite;

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

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

animation-direction:

定义了动画执行的方向

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

              /* 运动方向*/

               animation-direction:reverse;
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

          *{

               margin: ;

               padding: ;

          }

          #wrap{

              position: relative;

            margin: 200px auto;

              width: 300px;

              height: 300px;

              border: 1px solid;

          }

          #test{

              position:absolute;

              left:%;

              top: %;

          /*    transform: translate3d(-50%,-50%,0);*/

            margin-left: -50px;

            margin-top: -50px;

              width: 100px;

              height: 100px;

              background: red;

            border-radius:%;

          /*  定义动画名称*/

            animation-name:move;

            text-align: center;

             line-height: 100px;

             /*定义动画运动到结束时间*/

             animation-duration: 8s;

  /*           运动线性*/

             animation-timing-function:linear;

           /*  运动缓存时间*/

             animation-delay: 3s;

             /*动画内的属性*/

            /* 运动次数*/

             animation-iteration-count: infinite;

              }

              /* 运动方向*/

               animation-direction:reverse;

              @keyframes move{

                  from{transform:rotate(0deg);}

                  to{transform:rotate(360deg);}

              }

        </style>

    </head>

    <body>

        <div id="wrap">

            <div id="test"></div>

        </div>

    </body>

</html>

animation-fill-mode:forwards;

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

    animation-fill-mode: both;
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            #wrap{

                position: relative;

                margin: 200px auto;

                width: 300px;

                height: 300px;

                border: 1px solid;

            }

            #test{

                position: absolute;

                left: %;

                top: %;

                /*transform: translate3d(-50%,-50%,0);*/

                margin-left:-50px;

                margin-top: -50px;

                width: 100px;

                height: 100px;

                background: pink;

                text-align: center;

                font: 20px/100px "微软雅黑";

                /*动画内的属性*/

                animation-name: move;

                animation-duration:3s ;

                animation-timing-function: linear;

                    /*反转的是关键帧和animation-timing-function*/

                animation-direction:normal;

                /*动画外的属性*/

                animation-delay:1s;

                /*只作用于动画内的属性*/

                    /*重复的是关键帧*/

                animation-iteration-count: ;

                /*元素在动画外的状态

                 *

                 * backwards：from之前的状态与form的状态保持一致

                 * forwards：to之后的状态与to的状态保持一致

                 * both：backwards+forwards

                 * */

                animation-fill-mode: both;

                animation-play-state: running;

            }

            @keyframes move{

                from{

                    transform: translateY(-100px);

                }

                to{

                    transform: translateY(100px);

                }

            }

            #wrap:hover #test{

                animation-play-state: paused;

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <div id="test">邱海峰</div>

        </div>

    </body>

</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. 【转载】Spring 源码分析之 bean 实例化原理

    本次主要想写spring bean的实例化相关的内容.创建spring bean 实例是spring bean 生命周期的第一阶段.bean 的生命周期主要有如下几个步骤: 创建bean的实例 给实例 ...

  2. Ubuntu终端内打开文件管理器

        本文首发于cartoon的博客     转载请注明出处:https://cartoonyu.github.io/cartoon-blog     近段时间在ubuntu中搭建jdk并在jdk的 ...

  3. Vue双向数据绑定原理深度解析

    首先,什么是双向数据绑定?Vue是三大MVVM框架之一,数据绑定简单来说,就是当数据发生变化时,相应的视图会进行更新,当视图更新时,数据也会跟着变化. 在分析其原理和代码的时候,大家首先了解如下几个j ...

  4. 伪类checked

    困惑了好久的复选框自定义样式终于有了谜底,原来就是一个 :checked 伪类 他的意思就是 匹配任意被勾选/选中的radio(单选按钮),chexked(复选框),或者option(select项) ...

  5. iOS组件化开发-CocoaPods安装

    首先要检查Mac是否安装了rvm(ruby version manager).打开终端,输入指令$ rvm -v ,若没有安装 curl -L https://get.rvm.io | bash -s ...

  6. 16_TLB与流水线

    1 前面做的实验起始有缺陷 访问内存之后,后面执行两句代码后:并不能保证刚才访问的代码还在TLB中:有可能被刷新出去了: 实验验证缺陷: 代码 不连续 TLB 被淘汰: 2万次中有1次被淘汰:由于访问 ...

  7. d3操作svg路径动画，及dom移动

    图片跟随路径循环运动,dom也跟着路径运动(利用实时获取坐标位置的方法,改变transform) 1,准备路径 a,自己脑补路径 b,在ps上画好,然后在保存成png-24图片,背景透明,在网站htt ...

  8. Tomcat 调优的技巧

    转载:www.cnblogs.com/wangsen, https://mp.weixin.qq.com/s/WrIsOOyR7o4SwSXMT0Zecg 最近,看到一篇讲述 Tomcat 调优的文章 ...

  9. bzoj1294题解

    [题意分析] 给定一张网格图,每个网格可能是普通点.特殊点或障碍点,每个特殊点有一个分值.要求选定一条只经过普通点的可重复回路,使回路内部的特殊点分值和最大. [算法分析] 引理:射线法 对于平面内任 ...

  10. clipboard.js实现页面内容复制到剪贴板

    clipboard.js实现复制内容到剪切板,它不依靠flash以及其他框架,应用起来比较简单 <input type="text" name="copy_txt& ...