H5+CSS3简单动画 知识点 汇总
乱入几个:
1.h5的一个语义化标签
figure :用于规定独立的流内容(图像 图表 照片 代码等)
figcapition:与figure配套使用,用于标签定义figure元素标题
2.媒体查询:
通过不同的媒体类型和条件定义样式规则 ;媒体查询大部分媒体特性都接受min和max 用于表示“大于等于”或“小于等于”:width: min-width;max-width
媒体查询能够用在@media和import规则上,也能够用在HTML和XML中。
@media screen and (width:800px){...}
@import url(example.css) screen and (width:800px);
<link media="screen and (width:800px)" rel="stylesheet" href="example.css">
css3:
长处:方便。无需js,适合做图片、文字的简单效果;
缺点:不灵活;效果有限
划重点:
transform:变形。【transform:translate
/ rotete / scale / skew(平移 旋转,缩放。斜切)】transition: 过渡。【transition: property, duration, timing-function(Linear,ease,ease-in,ease-out,ease-in-out), delay】
- 必须要设置两个属性: 设置过渡效果的 CSS 属性的名称; 完毕过渡效果须要多少秒或毫秒。
3、animation:动画。【animation:name/ duration/ timing-function/
iteration-count(播放次数)/ direction/ play-stete】
详细介绍:
Transform :用于元素的变形处理 属性: translate,Rotate,scale,skew
(平移 ,旋转,缩放,斜切)
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
transition: 用于设置四个过渡属性 属性:property,duration,timing-function,delay
transition-property
规定设置过渡效果的 CSS 属性的名称。
transition-duration
规定完毕过渡效果须要多少秒或毫秒。
transition-timing-function
规定速度效果的速度曲线。 (Linear,ease,ease-in,ease-out,ease-in-out)
transition-delay
定义过渡效果何时開始。
animation:全部动画属性的简写属性,除了 animation-play-state 属性。
animation-name
规定须要绑定到选择器的 keyframe 名称。。
animation-duration
规定完毕动画所花费的时间。以秒或毫秒计。
animation-timing-function
规定动画的速度曲线。
animation-delay
规定在动画開始之前的延迟。
animation-iteration-count
规定动画应该播放的次数。
animation-direction
规定是否应该轮流反向播放动画。
举例(chrome浏览器下):
-webkit-animation: myfirst 2s linear 1s infinite both;
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;@-wbkit-keyframes myfirst {
}
-经常使用參考手冊-
属性 | 描写叙述 | CSS |
---|---|---|
@keyframes | 规定动画。 | 3 |
animation | 全部动画属性的简写属性,除了 animation-play-state 属性。 | 3 |
animation-name | 规定 @keyframes 动画的名称。 | 3 |
animation-duration |
规定动画完毕一个周期所花费的秒或毫秒。
默认是 0。 |
3 |
animation-timing-function |
规定动画的速度曲线。
默认是 "ease"。 |
3 |
animation-delay | 规定动画何时開始。默认是 0。 | 3 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
animation-play-state | 规定动画是否正在执行或暂停。默认是 "running"。 | 3 |
animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
animation-timing-function:<single-animation-timing-function>[,<single-animation-timing-function>]*
<single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[,
[ start | end ] ]?
) | cubic-bezier(<number>,<number>, <number>, <number>)
默认值:ease
适用于:全部元素。包括伪对象:after和:before
继承性:无
动画性:否
计算值:指定值
媒体:视觉
取值:
linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:平滑过渡。
等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。
等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。
等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:等同于 steps(1, start)
step-end:等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?):接受两个參数的步进函数。
第一个參数必须为正整数,指定函数的步数。
第二个參数取值能够是start或end。指定每一步的值发生变化的时间点。
第二个參数是可选的,默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>):
特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
animation-fill-mode:none
| forwards | backwards | both [ , none | forwards | backwards | both ]*
默认值:none
适用于:全部元素,包括伪对象:after和:before
继承性:无
取值:
none:默认值。
不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画開始时的状态
both:设置对象状态为动画结束或開始的状态
说明:
检索或设置对象动画时间之外的状态
假设提供多个属性值。以逗号进行分隔。
相应的脚本特性为animationFillMode。
animation-direction:normal | alternate [ , normal
| alternate ]*
默认值:normal
适用于:全部元素,包括伪对象:after和:before
继承性:无
取值:
normal:正常方向
alternate:正常与反向交替
说明:
检索或设置对象动画在循环中是否反向运动
假设提供多个属性值,以逗号进行分隔。
相应的脚本特性为animationDirection。
最新文章
- JStorm之Nimbus简介
- 我们为什么需要DTO?
- [摘录]quarts:Quartz Quick Start Guide
- [C++]C++标准里 string和wstring
- 2.cadence制板流程[原创]
- handler looper 和 线程
- 段落排版--行间距, 行高(line-height)
- Android Support库百分比布局
- ubuntu下海信Hisense E920 usb连接不上的处理与adb的连接
- Android超精准计步器开发-Dylan计步
- Android程序崩溃异常收集框架
- Qt: 文件、文件夹的操作;
- [转] 隐马尔可夫(HMM)、前/后向算法、Viterbi算法 再次总结
- linux 用户密码到期导致ftp业务失败
- 第一个微信小程序踩的几个小坑
- 第二章 Java内存区域与内存溢出异常
- 【第二篇】SAP ABAP7.5x新语法之OPEN SQL
- oracle 12cR1&;12cR2核心高实用性新特性
- LeetCode - Beautiful Array
- 在Visual Studio中使用组件图描述项目组件依赖关系