总结CSS3新特性(Animation篇)
总结CSS3新特性(Animation篇)
动画(Animation),是CSS3的亮点.//之一
通过animation属性指定@keyframe来完成关键帧动画;
@keyframe用法:
@keyframes name {
0% {
top: 0;
}/*0%可用from关键字替代*/ 50% {
top: 10px;
}
100% {
top: 0;
}/*100%可用to关键字替代*/
}
由于是CSS3,所以不出意外的各种前缀:
–图片来自MDN,CSS中的关键帧
单个帧中可填写多个属性,而且不需要保证一致,如:
@-webkit-keyframes identifier {
from {
top: 0;
}
50% {
top: 10px;
background-color: red;
}
to {
top: 20px;
color: red;
}
}/*这是一个完全有效的关键帧定义*/
需要注意的有几点:
关键帧中有效的属性为可动画属性;如出现不可动画属性,会忽略该属性,不影响其余属性的动画,
如属性后跟有 !important,则会忽略该属性,
某个关键帧如果重复定义,则取后定义的帧,
@-webkit-keyframes identifier {
from {
top: 0;
}
50% {
top: 10px;
/*该属性会动画*/
background-color: red !important;
/*因为有!important字样,所以该条将被忽略*/
text-align: center;
/*由于该属性不为可动画属性,因此也被忽略*/
}
to {
top: 20px;
color: red;
}
100% {
color: green;
}/*由于to关键字表示100%,所以该动画只会执行改变颜色为green,而to所对应的属性全部被忽略*/
}
帧数范围为0%-100%,不属于这个范围的则被忽略(经实验,关键帧定义可以不按顺序来,可以正确执行,但是可读性不太好);
Animation用法:
animation-name:设置动画的名称,就是@keyframe后跟的标识;
animation-duration:设置动画花费的时间,//这两个为必填属性,第一个不解释了,第二个必填的原因为默认值是0s,0s是不会产生动画效果的,所以为必填;
#demo {
animation-name: demo;
animation-duration: 2s;
}
@keyframe demo {
from {
top: 0;
}
to {
top: 20px;
}
}
animation-timing-function:设置动画的速度曲线,默认值为 ease,可选值有数个,可通过cubic-bezier函数来自定义,这里有一些定义好的,可以直接拿来用的函数,传送阵;
#demo {
animation-function: cubic-bezier(0.25,0.1,0.25,1);
/*自定义的贝塞尔曲线*/
}
animation-delay:设置动画开始前的等待时间,默认为0s;
#demo {
animation-delay: 2s;
/*动画将于2s后执行*/
}
animation-iteration-count:设置动画执行次数,默认为1,使用 infinite 关键字可以使动画无限循环;
#demo {
animation-iteration-count: infinite;
/*动画将无限循环,此时animation-fill-mode将无效*/
}
animation-direction:设置动画执行完后时候倒序执行,默认为normal,使用 alternate 关键字开启倒序执行
//仅有animation-iteration-count值为大于1次时才会激活,倒序执行消耗时间为animation-duration设置的时间,奇数次数为正序,偶数次数为倒序;
#demo {
animation-direction: alternate;
/*激活倒序播放*/
animation-iteration-count: 2;
/*此时该属性须大于1,direction才会有效*/
}
animation-play-state:设置动画当前状态,默认是 running ,为执行状态,可以设置为 paused 为暂停,
#demo {
animation-play-state: paused;
/*默认不触发动画*/
}
#demo:hover {
animation-play-state: running;
/*悬浮至该元素才执行动画*/
}
animation-fill-mode:设置动画执行完后的状态(复原(none),保持第一帧(backwards)以及保持最后一帧(forwards),还有一个both值 MDN说是同时backwards和forwards,原谅我没有试出它与forwards的区别…,)
//设置animation-iteration-count值为infinite时将导致该属性失效;
animation的简写方式对顺序要求特别严格,规格如下:
animation:name duration timing-function delay iteration-count direction play-state fill-mode;
使用时需注意:
各种前缀…@keyframe里边如果用到了transform,也是需要加前缀的,如:
@-webkit-keyframe demo {
from {
-webkit-transform: rotate(7deg);
}
to {
-webkit-transform: rotate(14deg);
}
}
部分参考文档:
- SpringBoot开发案例之整合定时任务(Scheduled)
- SpringBoot开发案例之整合mail发送服务
- SpringBoot开发案例之整合mongoDB
- Docker学习之CentOS 7安装配置
- Docker学习之搭建JavaWeb环境
- Docker学习之搭建JavaWeb环境进阶篇
- Docker学习之网络模式配置
- Docker学习之SSH连接docker容器
- Docker学习之搭建Nginx容器服务
- Docker学习之搭建MySql容器服务
- 初识Python
- XGboost数据比赛实战之调参篇(完整流程)
- Pandas使用DataFrame进行数据分析比赛进阶之路(一)
- Augmentor 使用介绍
- 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 实例
- 嵌套滑动通用解决方案--NestedScrollingParent2
- Python 爬取留言板留言(一):单进程版+selenium模拟
- Glide-图片加载框架全解(一)- 基本用法
- Python全栈(六)项目前导之1.Redis介绍及数据类型介绍
- 网络请求框架OkHttp3全解系列(一):OkHttp的基本使用
- 网络请求框架OkHttp3全解系列 - (二)OkHttp的工作流程分析
- 这次,我把Android事件分发机制翻了个遍
- 网络请求框架OkHttp3全解系列 - (三)拦截器详解1:重试重定向、桥、缓存(重点)
- Python全栈(七)Flask框架之4.Flask模板继承与案例练习
- 你想要的系列:网络请求框架OkHttp3全解系列 - (四)拦截器详解2:连接、请求服务(重点)
- 不会玩阴阳师的我带你一键下载《阴阳师:百闻牌》所有卡牌并调用百度OCR识别文字信息
- 微信小程序生命周期学习笔记-页面篇
- Python 字典 使用技巧
- 微信小程序生命周期学习笔记-组件
- C语言入门系列之2.数据类型、运算符和表达式