Home > Article > Web Front-end > What are the three major animation properties of css3
What are the three major animation properties of css3
- 青灯夜游Original
- 2021-12-16 14:56:363130browse
The three major animation attributes of css3 are: 1. The transition attribute is used to set the transition effect of the element; 2. The transform attribute is used to apply 2D or 3D transformation (rotation, scaling, movement or tilt) to the element; 3. The animation attribute needs to be used together with "@keyframes" to create animations.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css3 animation properties are divided into: transform, transition, animation
1.transition(transition)
a:transition-property：检索或设置对象中的参与过渡的属性 b.transition-duration：检索或设置对象过渡的持续时间 c.transition-delay：检索或设置对象延迟过渡的时间 d.transition-timing-function：检索或设置对象中过渡的动画类型 简写： transition: 属性值1 属性值2 属性值3 属性值4 属性值1： 需要参与过渡属性 all ( 能支持过渡属性的都会过渡变换 默认值) 属性值2： 过渡的时间 s秒 ms 毫秒 属性值3： 延迟的时间 s秒 ms 毫秒 属性值4： 动画的类型（匀速、匀加速、匀减速........）
For example: transition:3s 2s linear;
2.transform
2D
a.位移：transform:translate(参数1，参数2)
参数1：在X轴移动的距离
参数2：在Y轴移动的距离
ps:参数如果是正值的情况下：往右往下 负值：往左往上
单独设置X/Y的位移：
transform:translateX(参数);
transform:translateY(参数);
b.缩放：transform:scale(参数1，参数2);
参数1：X轴缩放的比例
参数2：Y轴缩放的比例
ps:参数小于1,缩小；参数大于1，放大。如果两参数相同，写一个就行
单独设置X Y
transform:scaleX();
transform:scaleY();
c.旋转：transform:rotate();
默认情况下围绕中心点转动，转动的是度数，deg!
单独设置围绕某个轴（X Y）
transform:rotateX()
transform:rotateY()
d.倾斜：transform:skew();
单独设置围绕某个轴（X Y）
transform:skewX()
transform:skewY()
补充：如果有两个功能函数：先写位移 再写旋转。Separate example rotation:
When around the center point :
span{
display: block;
width: 300px;
height: 150px;
background: purple;
transform: rotate(30deg);
}
When rotating around the X-axis:
span{
display: block;
width: 300px;
height: 150px;
background: purple;
transform: rotateX(30deg);
}
It can be seen that when rotating around the X-axis, The top of the box points in and the bottom points out.
When around the Y-axis:
span{
display: block;
width: 300px;
height: 150px;
background: purple;
transform: rotateY(30deg);
}
You can see that the left side of the picture is outward and the right side is outward. inside.
3D
Form 3D space: transform-style:preserve-3d
a.位移：
transform:translate(x,y,z);
translateX()
translateY()
translateZ(不能是百分比)
b.旋转：
transform:rotate();
rotateX()
rotateY()
rotateZ() //默认情况效果类似
rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]
- x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
- y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
- z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。3.animation
制定关键帧：
@keyframes 关键帧的名称{
from{}
to{}
或者
0%{
}
50%{
}
100%{
}
}
调用关键帧
animation: 复合属性
animation-name 关键帧的名称
animation-duration 动画的持续的时间
animation-timing-function 动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线 step-start //没有动画中间的过渡效果。每次直接跳到下一帧开始的地方）
animation-delay 动画的延迟
animation-iteration-count 动画运动的次数（默认情况下运动1次） infinite(无限循环)
animation-direction 运动的方向
属性值：
- reverse：反方向运行 （ 让关键帧从后往前执行 ）
- alternate：动画先正常运行再反方向运行，并持续交替运行
- alternate-reverse：动画先反运行再正方向运行，并持续交替运行
animation-play-state
属性值：
paused暂停
running运动
常用的写法：
animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间 Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:300px;
height:300px;
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
/* 3D的空间 */
transform-style: preserve-3d;
/* 为了方便观察让3D舞台转动角度 */
transform:rotateX(20deg) rotateY(30deg);
transition:2s;
animation: hh 2s linear infinite;
}
.box p{
width:300px;
height:300px;
text-align: center;
line-height:300px;
font-size: 100px;
font-weight:bolder;
color:#fff;
/* 让6个面全部定位在父元素里面 */
position:absolute;
left:0;top:0;
/* 透明 */
opacity:1;
border:2px solid #000;
/* 使背面不可见！ */
backface-visibility:hidden;
}
.con1{
/* 第一个面往前走 */
background:red;
transform:translateZ(150px);
}
.con2{
/* 第二个面往后走 */
background:blue;
transform:translateZ(-150px) rotateY(180deg); /*rotateY(180deg) 让正面朝外*/
}
.con3{
/* 先往上位移150px 再绕着X轴转动90deg */
background:pink;
transform:translateY(-150px) rotateX(90deg);
}
.con4{
/* 先往下位移150px,再绕着X轴转动90deg */
background:green;
transform:translateY(150px) rotateX(-90deg);
}
.con5{
/* 先往左位移150px , 再绕着Y轴转动90deg */
background:rosybrown;
transform:translateX(-150px) rotateY(-90deg);
}
.con6{
/* 先往右侧位移150px,再绕着Y轴转动90deg */
background:#000;
transform:translateX(150px) rotateY(90deg);
}
@keyframes hh{
from{
transform:rotateX(-20deg) rotateY(0deg) ;
}
to{
transform:rotateX(340deg) rotateY(360deg) ;
}
}
</style>
</head>
<body>
<p class="box">
<p class="con1">1</p>
<p class="con2">2</p>
<p class="con3">3</p>
<p class="con4">4</p>
<p class="con5">5</p>
<p class="con6">6</p>
</p>
</body>
</html>(Learning video sharing: css video tutorial)
The above is the detailed content of What are the three major animation properties of css3. For more information, please follow other related articles on the PHP Chinese website!