1、animation 动画

  概念:当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。

  通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

  • 规定动画的名称
  • 规定动画的时长

把 "myMove" 动画捆绑到 div 元素,时长:5 秒;

  1. 动画调用
  2. 调用动画的规则名称
  3. 动画持续的时间(可选)
  4. 动画的过渡类型
  5. 延迟时间
  6. 动画播放次数(默认1次,也可以成数字或者infinite则是无限循环)
  7. 是否停留在结束状态 forwards
  8. 反向运动 alternate 1

2、调用形式如下所示:---------------可以互相组合使用

 -webkit-animation: myMove 2s ;
-webkit-animation: myMove 2s linear 2s infinite ;无限循环
-webkit-animation: myMove 2s linear 2s 2 ;循环2次
-webkit-animation: myMove 2s linear 2s forwards ;停留在结束位置
-webkit-animation: myMove 4s linear 2s infinite alternate ;反向运动不能在1次运动时实现,播放次数必须在2次或2次以上才可以实现

3、复杂的动画调用规则:

A、动画规则的设置:

 @-webkit-keyframes myMove {
from{
margin-left: 0px;
background-color: orange;
}to{
margin-left: 200px;
background-color: rosybrown;
}
}

B、动画规则的设置,用百分比实现

 @-webkit-keyframes myMove{

 0%{ width: 200px; }
20%{ width: 200px; }
40%{width: 200px; }
60%{ width: 200px; }
100%{ width: 200px; }
}

4、暂停动画:

代码:animation-play-state: paused;

用途:用在轮播上,要借用hover属性来实现;表示鼠标移上去是动画停止,移出时动画继续

实例:

下面是调用动画:

 #boxhidden{
border: 1px solid rosybrown;
width: 320px;
height: 213px;
overflow: hidden;
} #boximg{
height: 213px;
width: 1920px;
font-size:;
animation: imgmove 4s linear infinite;
}
#boximg:hover{
animation-play-state: paused;
}

动画规则设置:

 @-webkit-keyframes imgmove {
0%{margin-left: 0px; } 10%{margin-left: -320px; }20%{ margin-left: -320px; }
30%{ margin-left: -640px; }40%{margin-left: -640px; }50%{margin-left: -960px; }
60%{ margin-left: -960px; }70%{margin-left: -1280px; }80%{margin-left: -1280px}
90%{margin-left: -1600px} 100%{margin-left: -1600px}
}

animation(动画)设置的更多相关文章

  1. Android中xml设置Animation动画效果详解

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  2. android中设置Animation 动画效果

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  3. CSS3 animation 动画

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

  4. Android Property Animation动画

    3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三 ...

  5. android Animation 动画绘制逻辑

    参考:http://www.jianshu.com/p/3683a69c38ea 1.View.draw(Canvas) 其中步骤为:/* * Draw traversal performs seve ...

  6. 转 iOS Core Animation 动画 入门学习(一)基础

    iOS Core Animation 动画 入门学习(一)基础 reference:https://developer.apple.com/library/ios/documentation/Coco ...

  7. css3 animation动画技巧

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

  8. 【Android 基础】Animation 动画介绍和实现

    在前面PopupWindow 实现显示仿腾讯新闻底部弹出菜单有用到Animation动画效果来实现菜单的显示和隐藏,本文就来介绍下吧. 1.Animation 动画类型 Android的animati ...

  9. Android Animation 动画属性

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现: 一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  10. [转]Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法

    转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...

随机推荐

  1. java面试题之----IO与NIO的区别

    JAVA NIO vs IO 当我们学习了Java NIO和IO后,我们很快就会思考一个问题: 什么时候应该使用IO,什么时候我应该使用NIO 在下文中我会尝试用例子阐述java NIO 和IO的区别 ...

  2. 如何避免在EF自动生成的model中的DataAnnotation被覆盖掉

    摘自ASP.NET MVC 5 网站开发之美 6.4 Metadata与数据验证 如果使用Database-First方式生成*.edms,那么所生成的类文件会在*.tt文件的层级之下,扩展名tt是一 ...

  3. compositionstart事件与compositionend事件

    https://blog.csdn.net/u013096088/article/details/52873562

  4. [翻译] NimbusKit

    注意:NimbusKit 是Github上iOS部分开源库排名前20中的一员. http://nimbuskit.info/ https://github.com/jverkoey/nimbus ht ...

  5. temp表空间被过多占用处理方法

    这个步骤比较简单,查询v$sort_usage就可以了: (select username,session_addr,sql_id,contents,segtype,blocks*8/1024/102 ...

  6. C/C++ 标准

    正式标准是需要付费的,不过可以在http://open-std.org/上找到标准的草案(和实际标准相差不大但是可以免费获取) 下面列出一下可能会用到的标准草案:C99:http://open-std ...

  7. .net 流(Stream) - StreamWriter和StreamReader、BinaryReader和BinaryWriter

    转自:http://www.oseye.net/user/kevin/blog/86 一.StreamWriter和StreamReader 从上一篇博文可知文件流.内存流和网络流操作的都是字节,每次 ...

  8. Boost智能指针——weak_ptr

    循环引用: 引用计数是一种便利的内存管理机制,但它有一个很大的缺点,那就是不能管理循环引用的对象.一个简单的例子如下: #include <string>#include <iost ...

  9. mongodb 备份、还原、导入、导出

    mongodump备份数据库 常用的备份命令格式 mongodump -h IP --port 端口 -u 用户名 -p 密码 -d 数据库 -o 文件存在路径 如果想导出所有数据库,可以去掉-d - ...

  10. sql 获取每个分组的前N条记录的写法

    SELECT * FROM ( --根据 tb表的name进行分组,根据年龄排序 SELECT * , ROW_NUMBER() OVER ( PARTITION BY name ORDER BY a ...