css---动画封装
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---动画封装的更多相关文章
- amazeui学习笔记--css（常用组件15）--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
- CSS 动画一站式指南
CSS 动画一站式指南 目录 CSS 动画一站式指南 1. CSS 动画 1.1 变换 1.1.1 变换属性介绍 1.1.2 变换动画实践 1.2 过渡 1.2.1 过渡属性介绍 1.2.2 过渡动画 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- 获取元素计算后的css样式封装
获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...
- Css 动画的回调
在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...
- 【译】css动画里的steps()用法详解
原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...
- css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
- Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS动画与GPU
写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...
随机推荐
- react map循环数据 死循环
项目条件:react es6 antidesign 已在commonState中获取到list,但是在循环map填充DOM的时候陷入死循环. 原因:因为是子组件 ,在父组件请求数据的时候 有个时差过程 ...
- [已解决]报错UnicodeDecodeError
输出报错: UnicodeDecodeError: 'utf-8' codec can't decode byte 0xc4 in position 220: in 解决方案:将编码方式utf-8 修 ...
- python#父与子的编程之旅#第十四章
1. 为BankAccount 建立一个类定义.它应该有一些属性,包括账户名(一个字符串).账号(一个字符串或整数)和余额(一个浮点数),另外还要有一些方法显示余额.存钱和取钱. class Bank ...
- htons(), ntohl(), ntohs()，htons()这4个函数（摘）
在C/C++写网络程序的时候,往往会遇到字节的网络顺序和主机顺序的问题.这是就可能用到htons(), ntohl(), ntohs(),htons()这4个函数.网络字节顺序与本地字节顺序之间的转换 ...
- 关于第一次将STM32与电脑连接情况
安装了Keil(ARM)版本之后,不管是自己编程,还是配套的程序运行.我们都想把它下载到STM32芯片里面,在板子上运行.这里介绍几种方法. 1.用J-LINK下载调试. 这个工具,可以直接点击kei ...
- vt-is-UTF8 - check whether current VT is in UTF8- or byte-mode. 检查当前VT是否处于VTF8模式或是字节模式.
总览 vt-is-UTF8 [-h|--help] [-V|--version] [-q|--quiet] 描述 vt-is-UTF8 checks whether the current VT is ...
- linux常用命令-3文件与目录相关命令
cd .. #返回上一级目录 cd ../.. #返回上两级目录 cd - #返回上次所在目录 cp file1 file2 #将file1复制为file2 cp -a dir1 dir2 #复制一个 ...
- centos6.5下，使用虚拟ftp用户
因为业务的问题,有位客户的账户总是出现各种问题,本人对于acl的使用又不是很会,所以和同事一起研究了一下这个虚拟ftp用户. Centos6.5 1 需求 为了保证系统的安全性,现对系统中vsftpd ...
- centos7 dns(bind)安装配置
yum install -y bind bind-chroot bind-utils chroot是通过相关文件封装在一个伪根目录内,已达到安全防护的目的,一旦程序被攻破,将只能访问伪根目录内的内容, ...
- java动态代理--proxy&cglib
大纲 代理 proxy cglib 小结 一.代理 为什么要用代理?其实就是希望不修改对象的情况下,增强对象. 静态代理: 静态代理模式,需要代理类和目标类实现同一接口,代理类的方法调用目标类的方法, ...