H5+CSS3简单动画知识点汇总

时间2024-01-26 17:42:02发布访客分类HTML浏览581

导读：收集整理的这篇文章主要介绍了html5教程-H5+CSS3简单动画知识点汇总，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。乱入几个：...

收集整理的这篇文章主要介绍了html5教程-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);

正题：

--page1 --

css属性

PRoPErty,duration,timing-function,delay

asp" title="CSS3 transition-property 属性"> transition-property@H_512_64@	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。（Linear,ease,ease-in,ease-out,ease-in-out）
transition-delay	定义过渡效果何时开始。

Transform :用于元素的变形处理属性: translate,Rotate,scale,skew (平移旋转，缩放，斜切)

--page 2 - vcD4KPG9sIGNsYXNzPQ==" list-paddingleft-2">

新建帧

animation:所有动画属性的简写属性，除了 animation-play-state 属性。

-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：[,]*

默认值：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([, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(, , , )：

特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-fill-mode：

默认值：none

适用于：所有元素，包含伪对象:after和:before

继承性：无

取值：

none：
默认值。不设置对象动画之外的状态
forwards：
设置对象状态为动画结束时的状态
backwards：
设置对象状态为动画开始时的状态
both：

设置对象状态为动画结束或开始的状态

说明：

检索或设置对象动画时间之外的状态

如果提供多个属性值，以逗号进行分隔。

对应的脚本特性为animationFillMode。

animation-direction

animation-direction：normal | alternate [ , normal | alternate ]*

默认值：normal

适用于：所有元素，包含伪对象:after和:before

继承性：无

取值：

normal：
正常方向
alternate：

正常与反向交替

说明：

检索或设置对象动画在循环中是否反向运动

如果提供多个属性值，以逗号进行分隔。

对应的脚本特性为animationDirection。

-------------------------------------------------------------------

乱入几个：

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);

正题：

--page1 --

css属性

property,duration,timing-function,delay

transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。（Linear,ease,ease-in,ease-out,ease-in-out）
transition-delay	定义过渡效果何时开始。

Transform :用于元素的变形处理属性: translate,Rotate,scale,skew (平移旋转，缩放，斜切)

--page 2 -

新建帧

animation:所有动画属性的简写属性，除了 animation-play-state 属性。

-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：[,]*

默认值：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([, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(, , , )：

特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-fill-mode：

默认值：none

适用于：所有元素，包含伪对象:after和:before

继承性：无

取值：

none：
默认值。不设置对象动画之外的状态
forwards：
设置对象状态为动画结束时的状态
backwards：
设置对象状态为动画开始时的状态
both：

设置对象状态为动画结束或开始的状态

说明：

检索或设置对象动画时间之外的状态

如果提供多个属性值，以逗号进行分隔。

对应的脚本特性为animationFillMode。

animation-direction

animation-direction：normal | alternate [ , normal | alternate ]*

默认值：normal

适用于：所有元素，包含伪对象:after和:before

继承性：无

取值：

normal：
正常方向
alternate：

正常与反向交替

说明：

检索或设置对象动画在循环中是否反向运动

如果提供多个属性值，以逗号进行分隔。

对应的脚本特性为animationDirection。

-------------------------------------------------------------------

2.理解CSS3 transform 中的Matrix(矩阵)

那ax+cy+e的意义是什么？
记住了，ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。

又迷糊了？不急，一个简单例子就明白了。

假设矩阵参数如下：

transform: matrix(1, 0, 0, 1, 30, 30);
     /* a=1, b=0, c=0, d=1, e=30, f=30 */

现在，我们根据这个矩阵偏移元素的中心点，假设是(0, 0)，即x=0,y=0。

于是，变换后的x坐标就是ax+cy+e = 1*0+0*0+30 =30,y坐标就是bx+dy+f = 0*0+1*0+30 =30.

于是，中心点坐标从(0, 0)变成了→(30, 30)。对照上面有个(30, 30)的白点图，好好想象下，原来(0,0)的位置，移到了白点的(30, 30)处，怎么样，是不是往右下方同时偏移了30像素哈！！

实际上transform: matrix(1, 0, 0, 1, 30, 30);就等同于transform: translate(30px, 30px);. 注意：translate,rotate等方法都是需要单位的，而matrix方法e, f参数的单位可以省略。

乱入几个：

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);

正题：

--page1 --

css属性

property,duration,timing-function,delay

asp" title="CSS3 transition-property 属性"> transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。（Linear,ease,ease-in,ease-out,ease-in-out）
transition-delay	定义过渡效果何时开始。

Transform :用于元素的变形处理属性: translate,Rotate,scale,skew (平移旋转，缩放，斜切)

--page 2 - vcD4KPG9sIGNsYXNzPQ==" list-paddingleft-2">

新建帧

animation:所有动画属性的简写属性，除了 animation-play-state 属性。

-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：[,]*

默认值：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([, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(, , , )：

特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-fill-mode：

默认值：none

适用于：所有元素，包含伪对象:after和:before

继承性：无

取值：

none：
默认值。不设置对象动画之外的状态
forwards：
设置对象状态为动画结束时的状态
backwards：
设置对象状态为动画开始时的状态
both：

设置对象状态为动画结束或开始的状态

说明：

检索或设置对象动画时间之外的状态

如果提供多个属性值，以逗号进行分隔。

对应的脚本特性为animationFillMode。

animation-direction

animation-direction：normal | alternate [ , normal | alternate ]*

默认值：normal

适用于：所有元素，包含伪对象:after和:before

继承性：无

取值：

normal：
正常方向
alternate：

正常与反向交替

说明：

检索或设置对象动画在循环中是否反向运动

如果提供多个属性值，以逗号进行分隔。

对应的脚本特性为animationDirection。

-------------------------------------------------------------------

乱入几个：

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);

正题：

--page1 --

css属性

property,duration,timing-function,delay

transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。（Linear,ease,ease-in,ease-out,ease-in-out）
transition-delay	定义过渡效果何时开始。

Transform :用于元素的变形处理属性: translate,Rotate,scale,skew (平移旋转，缩放，斜切)

--page 2 -

新建帧

animation:所有动画属性的简写属性，除了 animation-play-state 属性。

-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：[,]*

默认值：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([, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(, , , )：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-fill-mode：

animation-fill-mode：none | forwards | backwards | both [ , none | forwards | backwards | both ]*

默认值：none

适用于：所有元素，包含伪对象:after和:before

继承性：无

取值：
- none：
- 默认值。不设置对象动画之外的状态
- forwards：
- 设置对象状态为动画结束时的状态
- backwards：
- 设置对象状态为动画开始时的状态
- both：
- 设置对象状态为动画结束或开始的状态
  
  说明：
  
  检索或设置对象动画时间之外的状态
  - 如果提供多个属性值，以逗号进行分隔。
  - 对应的脚本特性为animationFillMode。
    
    animation-direction
    
    animation-direction：normal | alternate [ , normal | alternate ]*
    
    默认值：normal
    
    适用于：所有元素，包含伪对象:after和:before
    
    继承性：无
    
    取值：
    - normal：
    - 正常方向
    - alternate：
    - 正常与反向交替
      
      说明：
      
      检索或设置对象动画在循环中是否反向运动
      - 如果提供多个属性值，以逗号进行分隔。
      - 对应的脚本特性为animationDirection。
        
        -------------------------------------------------------------------
        
        2.理解CSS3 transform 中的Matrix(矩阵)
        
        那ax+cy+e的意义是什么？
        记住了，ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。
        
        又迷糊了？不急，一个简单例子就明白了。
        
        假设矩阵参数如下：
        
        transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */
        
        现在，我们根据这个矩阵偏移元素的中心点，假设是(0, 0)，即x=0,y=0。
        
        于是，变换后的x坐标就是ax+cy+e = 1*0+0*0+30 =30,y坐标就是bx+dy+f = 0*0+1*0+30 =30.
        
        于是，中心点坐标从(0, 0)变成了→(30, 30)。对照上面有个(30, 30)的白点图，好好想象下，原来(0,0)的位置，移到了白点的(30, 30)处，怎么样，是不是往右下方同时偏移了30像素哈！！
        
        实际上transform: matrix(1, 0, 0, 1, 30, 30);就等同于transform: translate(30px, 30px);. 注意：translate,rotate等方法都是需要单位的，而matrix方法e, f参数的单位可以省略。
        
        ?
        
        觉得可用，就经常来吧！欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

API Class CSS css3 CSS属性 div HTML Import post-format-gallery Prop State

若转载请注明出处： H5+CSS3简单动画知识点汇总
本文地址： https://pptw.com/jishu/587074.html

HTML5 WebSocket的机制浅析 H5学习

H5+CSS3简单动画 知识点 汇总

取值：

取值：

说明：

取值：

说明：

取值：

取值：

说明：

取值：

说明：

取值：

取值：

说明：

取值：

说明：

取值：

取值：

说明：

取值：

说明：

H5+CSS3简单动画知识点汇总