CSS3:动画大全
和过渡的区别
页面不用明显js调用；
过渡：必须有：hover visited 等伪类调用。（本质还是事件驱动）
动画：页面加载上就可以。
页面有js调用：
7个参数，*为可选
animation-name
animation-duration 执行时长
*animation-timing-function 和过渡一样http://www.cnblogs.com/leee/p/5481693.html
*animation-delay 延迟多少时间 ms s
*animation-iteration-count 循环次数默认为 1 （反方向也算一次）。无限循环infinite。
*animation-direction 偶数反向播放alternate 正向方向 normal
*animation-fill-mode 回撤位置none、forwards（保持动画最终）、backwards（保持动画开始） 或 both（同时2中状态，没用过）
播放 暂停 属性
animation-play-state 播放状态（ running 播放 和paused 暂停 ）
缺点：
1,写起来复杂。至少3个针对浏览器的animation+至少3个针对浏览器的#keyframe，
2没法动态改变目标点位置(animation-fill-mode)
关键帧：
数字：0%、25%、100%等
字符：from(0%)、to(100%)
JS结合
参考http://www.cnblogs.com/leee/p/5481693.html
obj.addEventListener('webkitAnimationEnd', function (){}, false); webkit
obj.addEventListener('AnimationEnd', function (){}, false); firfox
例子
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes move
{
0%{
width:100px;
}
100%
{
width:200px;
}
}
@-moz-keyframes move
{
0%{
width:100px;
}
100%
{
width:200px;
}
}
@keyframes move
{
0%{
width:100px;
}
100%
{
width:200px;
}
}
.box{width:100px;height:100px;background:red; -webkit-animation:move 2s 1s ease-in-out 4 alternate forwards; -moz-animation:move 2s 1s ease-in-out 4 alternate forwards;animation:move 2s 1s ease-in-out 4 alternate forwards;}
.box:hover{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;animation-play-state:paused }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS3:动画大全的更多相关文章
- css3动画大全
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3 动画实现方法大全
常用效果总结(需要引用animate.css) <!doctype html> <html lang="en"> <head> <meta ...
- css3动画的性能优化_针对移动端卡顿问题
这篇文章主要讲的是怎样制作流畅动画,特别是针对移动端.在这里我首先介绍制作动画的几种方法的优缺点:接着会着重介绍用css3制作动画的注意事项. 资源网站大全 https://55wd.com 设计导航 ...
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- 学习CSS3动画（animation）
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 用CSS3动画，让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
随机推荐
- HDU 2082 母函数模板题
找单词 Time Limit: 1000MS Memory Limit: 32768KB 64bit IO Format: %I64d & %I64u Submit Status De ...
- July 17th, Week 30th Sunday, 2016
You are beautiful, but that is not why I love you. 你如此美丽,但我并非因此而爱你. Although we have always been tol ...
- （八）STM32的CAN模块实验
bxCAN是基本扩展CAN(Basic Extended CAN)的缩写,它支持CAN协议2.0A和2.0B.它的设计目标是,以最小的CPU负荷来高效处理大量收到的报文.它也支持报文发送的优先级要求( ...
- **对比$_POST、$GLOBALS['HTTP_RAW_POST_DATA']和file_get_contents('php://input')
最近在开发微信接口,又学到了一些新的技术点,今天就把学到的关于接收数据的技术点给简单的罗列下. public function __construct($token, $wxuser = ''){ $ ...
- 用尽洪荒之力解决Apple Store ipv6审核通关---linux服务器支持ipv6
强势的库克时代到来,苹果开启了强制IPV6审核,大家也知道中国现在的情况,除了教育网实验性的支持IPV6,ISP运营商还不支持,想必大家都陆陆续续的遭受到了苹果无情的拒绝,以前开个加急,审核 ...
- 让/etc/profile文件修改后立即生效（转）
方法1:让/etc/profile文件修改后立即生效 ,可以使用如下命令:# . /etc/profile注意: . 和 /etc/profile 有空格方法2:让/etc/profile文件修改后 ...
- 电脑上安装的android虚拟机，能进行基站定位和GPS定位吗？要怎么做才能定位？（转）
基站定位是通过电信运营商的服务来实现的,至少你得有SIM卡吧,一般电脑是不会有电话功能的吧,所以,通过基站定位不可能. GPS是需要有相应的硬件来支持的,类似于手机需要有GPS模块才可以,电脑一般没有 ...
- CC2540开发板学习笔记（九）—— BLE协议简介
一.BLE协议简介 1.协议是什么? 协议是一系列的通信标准,双方需要共同按照这进行正常数据 协议是一系列的通信标准,双方需要共同按照这进行正常数据发射和 接收.协议栈是的具体实现形式,通俗点来理解就 ...
- SQL脚本--有关压缩数据库日志
/*--压缩数据库的通用存储过程 压缩日志及数据库文件大小 因为要对数据库进行分离处理 所以存储过程不能创建在被压缩的数据库中 --邹建 2004.03(引用请保留此信息)--*/ /*--调用示例 ...
- win 8.1 安装framework3.5
其实win8的iso上带着net 3.5的功能的,但是并没有随着系统安装二安装上去.所以只要你有跟你系统同个版本的iso文件,就可以实现不联网安装net3.5.首先把装载你的iso.Win8系统可以打 ...