CSS3 动画animation 过渡 transition 2D转换transform:translate （互相可以搭配使用-效果更炫酷）
动画
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash 动画，和 Javascripts。
CSS3 @keyframes 规则
要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是用来创建动画。 @keyframes规则内指定一个 CSS样式和动画将逐步从目前的样式更改为新的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#animated_div {
animation: animated_div 5s infinite;
-moz-animation: animated_div 5s infinite;
-webkit-animation: animated_div 5s infinite;
height: 50px;
width: 100px;
position: fixed;
}
@keyframes animated_div {
0% {
left: 0px;
}
20% {
left: 50px;
background-color: green;
}
40% {
left: 140px;
background-color: red;
}
60% {
left: 280px;
background-color: yellow;
}
80% {
left: 425px;
background-color: blue;
}
100% {
left: 0px;
background-color: pink;
}
}
</style>
</head>
<body>
<div id="animated_div"></div>
<script>
/*
注意：Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
常用属性
属性 描述 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
*/
</script>
</body>
</html>
过渡效果
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
尽管 CSS3 过渡效果是足够的过渡的一个元素,但是 text-transform 属性可以提高 CSS3 过渡效果的风格。
主要有四个属性的CSS3转换效果,已被描述如下:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
https://www.bookstack.cn/read/css3-tutorial/docs-Transitions%20Effect.md
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡效果 | www.waylau.com</title>
<meta name="description" content="过渡效果">
<meta name="author" content="Way Lau, www.waylau.com"/>
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<style>
.example {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 1s;
/* inear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) */
transition-timing-function: linear;
/* 规定过渡效果何时开始。默认是 0。 */
transition-delay: 2s;
/* Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
}
.example:hover {
width: 200px;
}
#example {
position: relative;
width: 530px;
height: 530px;
margin: 0 auto 10px;
padding: 10px;
}
.childbox {
font-size: 12px;
position: relative;
width: 60px;
height: 60px;
margin-bottom: 10px;
background-color: #ccc;
}
.childbox p {
text-align: center;
padding-top: 10px;
}
#ease.childbox {
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
border: 1px solid #ff0000;
}
#ease_in.childbox {
-webkit-transition: all 4s ease-in;
-moz-transition: all 4s ease-in;
-o-transition: all 4s ease-in;
transition: all 4s ease-in;
border: 1px solid #00ffff;
}
#ease_out.childbox {
-webkit-transition: all 4s ease-out;
-moz-transition: all 4s ease-out;
-o-transition: all 4s ease-out;
transition: all 4s ease-out;
border: 1px solid #f5f5f5;
}
#ease_in_out.childbox {
-webkit-transition: all 4s ease-in-out;
-moz-transition: all 4s ease-in-out;
-o-transition: all 4s ease-in-out;
transition: all 4s ease-in-out;
border: 1px solid #f209f3;
}
#linear.childbox {
-webkit-transition: all 4s linear;
-moz-transition: all 4s linear;
-o-transition: all 4s linear;
transition: all 4s linear;
border: 1px solid #ddddff;
}
#custom.childbox {
-webkit-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-moz-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-o-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
border: 1px solid #cfdf44;
}
#negative.childbox {
-webkit-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
-moz-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
-o-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
border: 1px solid #000;
}
#steps-start.childbox {
-webkit-transition: all 4s steps(4, start);
-moz-transition: all 4s steps(4, start);
-o-transition: all 4s steps(4, start);
transition: all 4s steps(4, start);
border: 1px solid #ff0;
}
#steps-end.childbox {
-webkit-transition: all 4s steps(4, end);
-moz-transition: all 4s steps(4, end);
-o-transition: all 4s steps(4, end);
transition: all 4s steps(4, end);
border: 1px solid #0f0;
}
#example:hover .childbox, #example.hover_effect .childbox {
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
margin-left: 420px;
background-color: #fff;
}
</style>
</head>
<body>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
<div class="example"></div>
<p>Hover on object to see it in action</p>
<div id="example">
<div id="ease" class="childbox"><p>CSS3</p></div>
<div id="ease_in" class="childbox"><p>CSS3</p></div>
<div id="ease_out" class="childbox"><p>CSS3</p></div>
<div id="ease_in_out" class="childbox"><p>CSS3</p></div>
<div id="linear" class="childbox"><p>CSS3</p></div>
<div id="custom" class="childbox"><p>CSS3</p></div>
<div id="negative" class="childbox"><p>CSS3</p></div>
<div id="steps-start" class="childbox"><p>CSS3</p></div>
<div id="steps-end" class="childbox"><p>CSS3</p></div>
</div>
</body>
</html>
2D 转换
CSS3 2D转换，我们可以斜拉(skew)，缩放(scale)，旋转(rotate)以及位移(translate)元素。
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动
rotate()方法，在一个给定度数沿着元素中心顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
.matrix{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2D translate | www.waylau.com</title>
<meta name="description" content="2D translate">
<meta name="author" content="Way Lau, www.waylau.com"/>
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<style>
div {
float:left;
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
.translate {
transform: translate(50px, 100px);
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari and Chrome */
}
.rotate
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
.scale
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}
.skew
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
.matrix
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>This is a DIV element.</div>
<div class="translate">This is a translate DIV element.</div>
<div class="rotate">Hello. This is a rotate DIV element.</div>
<div class="scale">Hello. This is a scale DIV element.</div>
<div class="skew">Hello. This is a skew DIV element.</div>
<div class="matrix">Hello. This is a matrix DIV element.</div>
</body>
</html>
transition基础和写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: #000;
}
.demo-1 {
/* // sass写法 */
/* &:hover{
} */
/* transition: width 1s linear 0s; */
/* transition: width 1s ease; */
transition: transform 1s ease-out;
}
/* 相当于 */
.demo-1:hover {
/* width: 500px; */
/* 旋转45度角 */
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box demo-1">
</div>
<script>
/*
Transition基础和写法
--属性名称(property)
--过度时间(duration)延迟时间(delay)
--时间函数(timing-function)
*/
/*
实用小帖
1.display不能和transition一起使用
2.transition后面尽量不要跟all
3.常见闪动，我们可以perspective和backface-visibility
*/
</script>
</body>
</html>
