There are three animation functions of css3:
1. transition (transition attribute)
2. animation (animation attribute)
3. transform (2D/3D conversion attribute)
The following will introduce my understanding one by one:
1. transition:
For example, -webkit-transition:color 1s;
is equivalent to:
-webkit-transition-property:color;
-webkit-transition-duration:1s;
The transition effect of multiple attributes can be written like this:
Method 1:-webkit-transition:
Method 2:
-webkit-transition:
-webkit-transition:
transition-timing-function attribute values have 5 values:
ease: start slowly, end slowly
liner: uniform
ease- in: slow start
ease-out: slow end
ease-in-out: slow start, slow end (slightly different from ease)
Example:
transition transition effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition过渡效果</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#box{
width: 200px;
height: 200px;
background-color: chocolate;
position: relative;
left: 0px;
top: 0px;
transition: top 5s ease,left 5s ease ;
-moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */
-webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */
-o-transition: top 5s ease,left 5s ease ; /* Opera */
}
.btn{
width: 512px;
margin: 0 auto;
border: 2px solid #e3e3e3;
border-radius: 5px;
padding: 10px;
}
.btn button{
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
margin-right: 20px;
}
button:last-child{
margin-right: 0px;
}
</style>
<script>
window.onload=function(){
var e1 = document.getElementById("e1");
var e2 = document.getElementById("e2");
var e3 = document.getElementById("e3");
var e4 = document.getElementById("e4");
var e5 = document.getElementById("e5");
var box = document.getElementById("box");
e1.onclick=function(){
box.style.left = 1000+"px";
box.style.top = 100+"px";
box.style.transitionTimingFunction="ease";
};
e2.onclick=function(){
box.style.right = 0+"px";
box.style.top = 0+"px";
box.style.transitionTimingFunction="liner";
};
e3.onclick=function(){
box.style.right = 1000+"px";
box.style.top = 100+"px";
box.style.transitionTimingFunction="ease-in";
};
e4.onclick=function(){
box.style.left = 0+"px";
box.style.top = 0+"px";
box.style.transitionTimingFunction="ease-out";
};
e5.onclick=function(){
box.style.left = 1000+"px";
box.style.top = 100+"px";
box.style.transitionTimingFunction="ease-in-out";
};
}
</script>
</head>
<body>
<p id="box"></p>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<br>
<br>
<br>
<p class="btn">
<button id="e1">ease</button>
<button id="e2">liner</button>
<button id="e3">ease-in</button>
<button id="e4">ease-out</button>
<button id="e5">ease-in-out</button>
</p>
</body>
</html>2. Animation attribute animation
animation: name duration timing-function delay iteration-count direction;
Value | Description |
| ##animation-name | #Specifies the keyframe name that needs to be bound to the selector. . |
| animation-duration | Specifies the time it takes to complete the animation, in seconds or milliseconds. |
| animation-timing-function | Specifies the speed curve of animation. |
| animation-delay | Specifies the delay before the animation starts. |
| animation-iteration-count | Specifies the number of times the animation should be played. |
| animation-direction | Specifies whether the animation should be played in reverse in turn. |
| ##value | Description |
Required. Defines the name of the animation. | |
Required. The percentage of animation duration. | Legal values: ##0-100%
|
Required. One or more legal CSS style properties. | 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。 例如： animation:mymove 5s infinite;
@keyframes mymove{
from{ top:0px; }
to{ top:200px; }
}Copy after login 还可以这么写： @keyframes mymove{
0%{ top:0px; }
25%{ top:200px; }
50%{ top:100px; }
75%{ top:200px; }
100%{ top:0px; }
}Copy after login 案例： <!DOCTYPE html>
<html>
<head>
<style>
p
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<p></p>
</body>
</html>Copy after login 3、设置3D场景（即transform） -webkit-perspective:800;(单位为像素)--即三维物体距离屏幕的距离。 -webkit-perspective-origin:50% 50%;(这个属性代表了人眼观察的视野。50% 50%为X轴、Y轴相应的位置，即屏幕的正中央。) 使用transform属性调整元素：-webkit-transform-style:-webkit-perserve-3d;(这个属性是告诉浏览器我们是在一个三维空间中对元素进行操作) (1)、translate(移动距离) translateX（x px） translateY（y px） translateZ（z px） (2)、rotate(旋转角度) rotateX(x deg) rotateY(y deg) rotateZ(z deg) transform：rotate（45deg） rotateX:向屏幕上边沿向内旋转为正方向。 rotateY:向屏幕竖直向下为正方向。 rotateZ:向屏幕外为正方向。 一个p块，右边沿向屏幕内旋转45deg,即应设置为：Transform：rotateY（45deg）。 实例： transform3D转换效果 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform3D转换效果</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#box{
width: 200px;
height: 200px;
background-color: chocolate;
position: relative;
left: 0px;
top: 0px;
perspective:800px;
perspective-origin:50% 50%;
transform-style: preserve-3d;
transform-origin:0% 100%;//以Y轴为旋转中心
}
p{
margin:20px 520px;
}
.btn{
width: 300px;
margin: 0 auto;
border: 2px solid #e3e3e3;
border-radius: 5px;
padding: 10px;
}
.btn button{
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
margin-right: 20px;
}
button:last-child{
margin-right: 0px;
}
</style>
<script>
window.onload=function(){
var tx = document.getElementById("tx");
var ty = document.getElementById("ty");
var tz = document.getElementById("tz");
var rx = document.getElementById("rx");
var ry = document.getElementById("ry");
var rz = document.getElementById("rz");
var box = document.getElementById("box");
tx.onclick=function(){
box.style.transform = "translateX(500px)";
};
ty.onclick=function(){
box.style.transform = "translateY(400px)"
};
rx.onclick=function(){
box.style.transform = "rotateX(30deg)"
};
ry.onclick=function(){
box.style.transform = "rotateY(30deg)"
};
rz.onclick=function(){
box.style.transform = "rotateZ(30deg)"
};
}
</script>
</head>
<body>
<p id="box"></p>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<br>
<br>
<br>
<p>translate(移动距离)</p>
<p class="btn">
<button id="tx">translateX</button>
<button id="ty">translateY</button>
</p>
<p>rotate(旋转角度)</p>
<p class="btn">
<button id="rx">rotateX</button>
<button id="ry">rotateY</button>
<button id="rz">rotateZ</button>
</p>
</body>
</html>Copy after login 使用transform-origin属性调整旋转中心。默认旋转中心点为p盒子的正中心。 这个旋转中心是可以改变的： X轴：left、center、right. Y轴：top、center、bottom. Z轴：length px(一个长度值)。 以上这篇css3动画效果小结(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。 更多Summary analysis of css3 animation effects相关文章请关注PHP中文网！ 相关文章：
Previous article：Flexbox creates CSS layout to achieve horizontal and vertical centering example analysis
Next article：A brief discussion on the callback processing method of CSS3 animation
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Make the page mobile-friendly?
I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
|
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
