animation(动画)设置
1、animation 动画
概念:当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
- 规定动画的名称
- 规定动画的时长
把 "myMove" 动画捆绑到 div 元素,时长:5 秒;
- 动画调用
- 调用动画的规则名称
- 动画持续的时间(可选)
- 动画的过渡类型
- 延迟时间
- 动画播放次数(默认1次,也可以成数字或者infinite则是无限循环)
- 是否停留在结束状态 forwards
- 反向运动 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(动画)设置的更多相关文章
- Android中xml设置Animation动画效果详解
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- android中设置Animation 动画效果
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- CSS3 animation 动画
今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...
- Android Property Animation动画
3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中又引入了一个新的动画系统:property animation,这三 ...
- android Animation 动画绘制逻辑
参考:http://www.jianshu.com/p/3683a69c38ea 1.View.draw(Canvas) 其中步骤为:/* * Draw traversal performs seve ...
- 转 iOS Core Animation 动画 入门学习(一)基础
iOS Core Animation 动画 入门学习(一)基础 reference:https://developer.apple.com/library/ios/documentation/Coco ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- 【Android 基础】Animation 动画介绍和实现
在前面PopupWindow 实现显示仿腾讯新闻底部弹出菜单有用到Animation动画效果来实现菜单的显示和隐藏,本文就来介绍下吧. 1.Animation 动画类型 Android的animati ...
- Android Animation 动画属性
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现: 一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
- [转]Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法
转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...
随机推荐
- java面试题之----IO与NIO的区别
JAVA NIO vs IO 当我们学习了Java NIO和IO后,我们很快就会思考一个问题: 什么时候应该使用IO,什么时候我应该使用NIO 在下文中我会尝试用例子阐述java NIO 和IO的区别 ...
- 如何避免在EF自动生成的model中的DataAnnotation被覆盖掉
摘自ASP.NET MVC 5 网站开发之美 6.4 Metadata与数据验证 如果使用Database-First方式生成*.edms,那么所生成的类文件会在*.tt文件的层级之下,扩展名tt是一 ...
- compositionstart事件与compositionend事件
https://blog.csdn.net/u013096088/article/details/52873562
- [翻译] NimbusKit
注意:NimbusKit 是Github上iOS部分开源库排名前20中的一员. http://nimbuskit.info/ https://github.com/jverkoey/nimbus ht ...
- temp表空间被过多占用处理方法
这个步骤比较简单,查询v$sort_usage就可以了: (select username,session_addr,sql_id,contents,segtype,blocks*8/1024/102 ...
- C/C++ 标准
正式标准是需要付费的,不过可以在http://open-std.org/上找到标准的草案(和实际标准相差不大但是可以免费获取) 下面列出一下可能会用到的标准草案:C99:http://open-std ...
- .net 流(Stream) - StreamWriter和StreamReader、BinaryReader和BinaryWriter
转自:http://www.oseye.net/user/kevin/blog/86 一.StreamWriter和StreamReader 从上一篇博文可知文件流.内存流和网络流操作的都是字节,每次 ...
- Boost智能指针——weak_ptr
循环引用: 引用计数是一种便利的内存管理机制,但它有一个很大的缺点,那就是不能管理循环引用的对象.一个简单的例子如下: #include <string>#include <iost ...
- mongodb 备份、还原、导入、导出
mongodump备份数据库 常用的备份命令格式 mongodump -h IP --port 端口 -u 用户名 -p 密码 -d 数据库 -o 文件存在路径 如果想导出所有数据库,可以去掉-d - ...
- sql 获取每个分组的前N条记录的写法
SELECT * FROM ( --根据 tb表的name进行分组,根据年龄排序 SELECT * , ROW_NUMBER() OVER ( PARTITION BY name ORDER BY a ...