css3动画-animation
animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强。
配置animation
animation-delay:从加载到开始执行的延迟
animation-direction:normal|reverse|alternate|alternate-reverse 参考
normal:往前执行,完成后又回到原点
reverse:和定义的方向相反,完成后回到原点开始执行
alertnate:先往前到最后,又从最后往前执行,看上去比较顺滑
animation-duration:持续时间
animation-iteration-count:重复次数(infinite 无限)
animation-name:@keyframes定义的名称,描述每帧内元素的表现
animation-play-state:终止或者重新开始animation序列
animation-timing-function:定义运动曲线的function
animation-fill-mode:参考
用keyframes定义animation顺序
定义一系列的keyframe来描述元素在被给的时间内应该怎么表现。两个最重要的状态就是0%(最初状态)和100%(终止状态)别名是from和to,这两个状态是可选的,如果没有指定,就用当前元素计算出来的值。
例子:
h1 {
-webkit-animation-duration: 3s;
-webkit-animation-name: slidein;
} @-webkit-keyframes slidein {
from {
margin-left: %;
width: %;
} to {
margin-left: %;
width: %;
}
}
<h1>Watch me move</h1>
<p>This example shows how to use CSS animations to make <code>H1</code> elements move across the page.</p>
@keyframes定义了slidein,有两个状态0%和100%。最初状态 margin-left: 100%;width: 300%,3s后margin-left:0%;width:100%;
animation事件
animationstart animation开始
animationend 结束
animationiteration 新的循环开始
事件有两个属性 animationName
和 elapsedTime(运行时间)
css3动画-animation的更多相关文章
- 前端CSS3动画animation用法
前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...
- CSS3 动画animation
关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- CSS3 动画 animation和@keyframes
CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...
- CSS3动画animation认识,animate.css的使用
CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...
- css3动画animation
动画:animation animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...
- CSS3 动画Animation的8大属性
animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- CSS3动画详解(结合实例)
一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...
随机推荐
- java中io对文件操作的简单介绍
11.3 I/O类使用 由于在IO操作中,需要使用的数据源有很多,作为一个IO技术的初学者,从读写文件开始学习IO技术是一个比较好的选择.因为文件是一种常见的数据源,而且读写文件也是程序员进行IO编程 ...
- Course
Coursera计算机专业课程列表 巴黎中央理工学院人工视觉中的离散推理和学习 教授 Nikos Paragios & Pawan Kumar Jan 10th 2014 8 ...
- java 面向抽象编程的思想
SIM.java public abstract class SIM { public abstract void setNumber(String n); public abstract Strin ...
- “玲珑杯”ACM比赛 Round #1 题解
A:DESCRIPTION Eric has an array of integers a1,a2,...,ana1,a2,...,an. Every time, he can choose a co ...
- MFC添加背景图片三种方法
方法一: 1.声明成员变量CBrush m_brush;2.在InitDialog中添加代码: ? CBitmap bmp; bmp.LoadBitmap(IDB_BITMAP1); //IDB_B ...
- 对Viewcontroller在UINavigationController中入栈出栈的一点点理解
转载自:http://blog.csdn.net/intheair100/article/details/41119073 wait_record_arr 在viewdidload里面被alloc,如 ...
- vim的复制粘贴小结(转)
原文地址:http://lsong17.spaces.live.com/blog/cns!556C21919D77FB59!603.entry 内容: 用vim这么久 了,始终也不知道怎么在vim中使 ...
- 删除DriverStore\FileRepository文件夹后,设备驱动无法安装,提示“没有为设备信息集或元素选择驱动程序(代码 28)”的解决办法
前言: 我前几天手贱,整个FileRepository删除掉了,之后重启就出现了让人蛋疼的这个问题,因为出于各种原因不想重装系统,百度轮番换搜索词无果,虽然驱动装上了但新设备依然无法自动安装驱动等“一 ...
- 深入浅出Ajax(三)
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- PS2鼠标+LCD12864实验——终于OK 了
抱着“不气馁.不放弃.誓不罢休.搞不定你我还能搞其他玩意吗”的心态,调试许久的PS2鼠标实验,终于在今天被我搞定了.发几张图显摆一下,嘿嘿... 左键按下+鼠标移动 右键按下+鼠标移动 中键按 ...