【css3】笔记之 过渡、变形和动画
一、过渡、变形和动画
1. 过渡 transition
应用举例：
a元素normal状态样式为一种，:hover时为另一种，希望由normal转为active时缓慢的变化，这是可以在normal样式中添加transition，如transition: all 1s ease 0s.
属性介绍：
简写是transition: all 1s ease 0s， 从前到后属性意义依次是：
transition-property:要过渡的css属性名
transition-duration:完成过渡需要的时间
transition-timing-function:过渡的速度如何变化，比如有ease linear ease-in ease-out ease-in-out cubic-bezier。如果没定义浏览器默认用ease。
transition-delay: 可选。定义过渡开始前的延迟时间
也可以设置不同的css属性有不同的过渡时间，像这样：
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
2. 2d变形 transform
transfrom可以指定元素会做什么样的变形，可用的2d变形有：
transfrom: translate(40px, 10px)
translate是上下左右移动，translate第一个值说的是左右移动值，第二个值是上下移动。上面的例子就是说向右移动40px，向下移动10px。
transform : scale(1.7)
scale可以控制元素放大缩小。scale(1.7)是将元素放大1.7倍大小，scale(0.5)是将元素缩小到0.5倍大小。
transform: rotate(45deg)
rotate是将元素旋转多少度。rotate(45deg)是元素顺时针旋转45度。
transform: skew(10deg, 20deg)
skew是将元素进行斜切。skew(10deg, 20deg)是x轴方向10度斜切，y轴方向20度斜切
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989)
matrix可以在像素级上完成上面几个属性值完成的效果，具体咋弄不研究了，我不是做设计的。。
transform-origin: 20% 20%
transform-origin可以设置transform时中心点在哪里，不设置默认是以元素的中心为中心点。
3. 3d变形
关于3d变形举一个例子，翻拍效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.blue{
background: blue;
}
.pink{
background: pink;
}
.face{
width: 200px;
height: 400px;
}
.container{
-webkit-perspective: 500; /*透视，值越小效果越明显*/
}
.card{
transform-style: preserve-3d; /*3d变化在子元素上保留*/
transition: 10s;
width: 200px;
height: 400px;
}
.container:hover .card{
transform: rotateY(180deg); /*从下往上看顺时针旋转180度*/
}
.face{
position: absolute;
backface-visibility: hidden; /*反转到后面看不见*/
}
.back{
transform: rotateY(180deg); /*这没有transition的过程哦*/
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="face front blue">front</div>
<div class="face back pink">back</div>
</div>
</div>
</body>
</html>
4. 动画
上一个“颤抖吧”的例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
@keyframes shake{
0% {
transform: rotate(30deg);
}
50% {
transform: rotate(-50deg);
}
100%{
transform: rotate(20deg);
}
}
@-webkit-keyframes shake{ /*定义动画，名字是shake，不同阶段的css*/
0% {
transform: rotate(30deg);
}
50% {
transform: rotate(-50deg);
}
100%{
transform: rotate(20deg);
}
}
.float{
position: absolute;
top: 200px;
left: 200px;
animation: shake 0.5s infinite ease-in; /*应用动画，shake是动画名，0.5是执行一次动画的事件，infinite是动画执行次数当然也可以设置成5表示执行5次*/
-webkit-animation: shake 0.5s infinite ease-in;
width: 30px;
height: 30px;
background: red;
}
</style>
</head>
<body>
<div class="float"></div>
</body>
</html>
