动画(CSS3) animation
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
动画序列
- 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列。
- 在@keyframes中规定某项css样式,就能创建由当前样式逐渐改变为新样式的动画效果
- 动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数。
- 用百分比来规定变化发生的时间,或用关键词"form"和"to",等同于0%和100%。
动画基本使用
- 先定义动画
- 再调用动画
动画简写格式:
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束方向;
属性 |
描述 |
---|---|
@keyframes |
规定动画。 |
animation |
所有动画属性的简写属性,除了animation-play-state属性。 |
animation-name |
规定@keyframes动画的名称。(必须的) |
animation-duration |
规定动画完成一个周期所花费的秒或毫秒,默认是0。(必须的) |
animation-timing-function |
规定动画的速度曲线,默认是“ease”。 |
animation-delay |
规定动画何时开始,默认是0。 |
animation-iteration-count |
规定动画被播放的次数,默认是1,还有infinite |
animation-direction |
规定动画是否在下一周期逆向播放,默认是“normal“,alternate逆播放 |
animation-play-state |
规定动画是否正在运行或暂停。默认是"running",还有"paused"。 |
animation-fill-mode |
规定动画结束后状态,保持forwards回到起始backwards |
- 简写属性里面不包含 animation-play-state
- 暂停动画:animation-play-state: puased; 经常和鼠标经过等其他配合使用
- 想要动画走回来 ,而不是直接跳回来:animation-direction : alternate
- 盒子动画结束后,停在结束位置: animation-fill-mode : forwards
速度曲线细节
animation-timing-function:规定动画的速度曲线,默认是“ease”
值 |
描述 |
---|---|
linear |
动画从头到尾的速度是相同的。匀速 |
ease |
默认。动画以低速开始,然后加快,在结束前变慢。 |
ease-in |
动画以低速开始。 |
ease-out |
动画以低速结束。 |
ease-in-out |
动画以低速开始和结束。 |
steps() |
指定了时间函数中的间隔数量(步长) |
关于几个值,除了名字,动画时间,延时有严格顺序要求,其它随意
@keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 } 100% }
animation-iteration-count:infinite; 无限循环播放 animation-play-state:paused; 暂停动画
小熊案例:
div {
position: absolute;
width: 200px;
height: 100px;
background: url(images/bear.png) no-repeat;
/* animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; */
/* 元素可添加多个动画,用逗号分隔 */
/* steps(步数),动画分几步完成 */
animation: run 0.5s steps(8) infinite, move 3s linear forwards;
}
@keyframes run {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
- CentOS 7.2下安装Mono 5.0
- ROR学习笔记(1):Rails 2快速创建GRUD应用
- API网关Ocelot 使用Polly 处理部分失败问题
- 使用GoogleAPI加载各种js框架
- Docker容器学习梳理--日常操作总结
- 马化腾:通向互联网未来的七个路标
- jQuery扩展以及gzip压缩测试
- python2.6升级到3.3.0 的操作记录
- 由javascript中"匿名函数调用写法"引出的一些东东
- javascript中定义私有方法(private method)
- python升级后带来的几个小问题
- 分布式监控系统Zabbix-3.0.3-完整安装记录(1)
- centos6.8下安装部署LNMP-(nginx1.8.0+php5.6.10+mysql5.6.12)
- IE7下当position:fixed遇到text-align:center
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例