前端面试之CSS3动画

程序员文章站 2022-06-09 21:12:03

...

CSS3动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript 。

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称
规定动画的时长

CSS3 中的动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

CSS3动画属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-806EaOUG-1598616322266)(C:\Users\Administrator\Desktop\1.jpg)]

CSS3 中有三个关于动画的样式属性transform、transition和animation ：

transform

transform可以用来设置元素的形状改变。

主要有以下几种变形：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形）。

.transform-class {
    transform ： none | <transform-function> [ <transform-function> ]*
}

none表示不做变换；``表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在()里面，用空格分开，例如：

.transform-class {
    transform ： rotate(30deg) scale(2,3);
}

transform-origin 基点

所有的变形都是基于基点，基点默认为元素的中心点。用法：transform-origin: (x, y)，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用left、center、right；y 可以用top、center、bottom。

.transform-class {
    transform-origin: (left, bottom);
}

rotate 旋转

用法：rotate()；表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转 ,比如transform: rotate(35deg);

.transform-rotate {
    transform: rotate(30deg);
}

translate 移动

移动也分三种情况：translate([, ])、translateX()和translateY()；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位：px、rem等;

.transform-translate {
    transform: translate(400px, 20px);
}

.transform-translateX {
    transform: translateX(300px);
}

.transform-translateY {
    transform: translateY(20px);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BSn3VaDC-1598616322269)(C:\Users\Administrator\Desktop\1304324-7d4435c1250dff29.webp)]

skew 扭曲

*这个用法和rotate非常相似。*

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

扭曲同样也有三种情况，skew([, ])、skewX()和skewY()；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。

1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；

**第一个参数对应X轴，第二个参数对应Y轴。**如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。

2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

**3、**skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

.transform-skew {
    transform: skew(30deg, 10deg);
}

.transform-skewX {
    transform: skewX(30deg);
}

.transform-skewY {
    transform: skewY(10deg);
}

matrix

matrix3d的默认值

div {
  transform: matrix3d(1, 0, 0, 0, 0,  1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
}

个人感觉介绍的不错的

https://www.jianshu.com/p/c37cf06d5b92

scale 缩放

它有三种用法：scale([, ])、scaleX()和scaleY()；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。

.transform-scale {
    transform: scale(2,1.5);
}

.transform-scaleX {
    transform: scaleX(2);
}

.transform-scaleY {
    transform: scaleY(1.5);
}

transition

transition是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：

transition-property（变换的属性，即那种形式的变换：大小、位置、扭曲等）；
transition-duration（变换延续的时间）；
transition-timing-function（变换的速率）
transition-delay（变换的延时）

.transition-class {
    transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*;
}

transition-duration

它是用来设置转换过程的持续时间，单位是s或者ms，默认值为0；

.transition-duration {
    transition-duration ： <time> [, <time>]* ;
}

transition-property

它是用来设置哪些属性的改变会有这种平滑过渡的效果，主要有以下值：

none；
all；

元素属性名：

color；
length；
visibility；
…

.transition-property {
    transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*;
}

transition-timing-function

它是来设置过渡效果的速率，它有6种形式的速率：

ease：逐渐变慢（默认），等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
linear：匀速，等同于贝塞尔曲线(0.0, 0.0, 1.0, 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)；
cubic-bezier：自定义贝塞尔曲线。

.transition-timing {
    transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*;
}

transition-delay

它是来设置过渡动画开始执行的时间，单位是s或者ms，默认值为0；

.transition-delay {
    transition-delay ： <time> [, <time>]*;
}

animation

animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的。

animationName：动画名称，开发人员自己命名；
percentage：为百分比值，可以添加多个百分比值；
properties：样式属性名称，例如：color、left、width等等。

animation-name

它是用来设置动画的名称，可以同时赋值多个动画名称，用,隔开：

.animation {
    animation-name: none | IDENT[,none | IDENT]*;
}

animation-duration

它是用来设置动画的持续时间，单位为s，默认值为0：

.animation {
    animation-duration: <time>[,<time>]*;
}

animation-timing-function

和transition-timing-function类似：

.animation {
    animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*;
}

animation-delay

它是来设置动画的开始时间，单位是s或者ms，默认值为0：

.animation {
    animation-delay: <time>[,<time>]*;
}

animation-iteration-count

它是来设置动画循环的次数，默认为1，infinite为无限次数的循环：

.animation {
    animation-iteration-count:infinite | <number> [, infinite | <number>]*;
}

animation-direction

它是来设置动画播放的方向，默认值为normal表示向前播放，alternate代表动画播放在第偶数次向前播放，第奇数次向反方向播放：

.animation {
    animation-direction: normal | alternate [, normal | alternate]*;
}

animation-play-state

它主要是来控制动画的播放状态：running代表播放，而paused代表停止播放，running为默认值：

.animation {
    animation-play-state:running | paused [, running | paused]*;
}

animation

它是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction的简写：

.animation {
    animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>]}

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>]}


前端小白 许多属于借鉴 方便自己和大家查阅

前端面试之CSS3动画

CSS3动画

CSS3 @keyframes 规则

CSS3 中的动画

CSS3动画属性

transform

transform-origin 基点

rotate 旋转

translate 移动

skew 扭曲

matrix

scale 缩放

transition

transition-duration

transition-property

transition-timing-function

transition-delay

animation

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-play-state

animation

js前端面试之同步与异步问题详解

css3的动画特效之动画序列（animation）

css3的动画特效之动画序列（animation）

python 之前端开发（ jQuery事件、动画效果、.each()、 .data()）

基于CSS3特效之动画:animation的应用

css3元素出现动画实例-XboxYan前端工作站-SegmentFault思否

收集前端面试题之url、href、src

前端笔记知识点整合之jQuery（一）加载函数的区别&对象&操作HTML/CSS&动画&选择器

前端（七）之动画与阴影

js前端面试之同步与异步问题详解

前端面试之CSS3动画

CSS3动画

CSS3 @keyframes 规则

CSS3 中的动画

CSS3动画属性

transform

transform-origin 基点

rotate 旋转

translate 移动

skew 扭曲

matrix

scale 缩放

transition

transition-duration

transition-property

transition-timing-function

transition-delay

animation

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-play-state

animation

js前端面试之同步与异步问题详解

css3的动画特效之动画序列（animation）

css3的动画特效之动画序列（animation）

python 之 前端开发（ jQuery事件、动画效果、.each()、 .data()）

基于CSS3特效之动画:animation的应用

css3元素出现动画实例-XboxYan前端工作站-SegmentFault思否

收集前端面试题之url、href、src

前端笔记知识点整合之jQuery（一）加载函数的区别&对象&操作HTML/CSS&动画&选择器

前端（七）之动画与阴影

js前端面试之同步与异步问题详解

python 之前端开发（ jQuery事件、动画效果、.each()、 .data()）