transition
过渡属性，transition是一个简写属性，用于设置四个过渡属性
transtion- property ，规定过渡 效果的CSS属性的名称
transtion- duration，规定完成过渡效果需要的时间
transtion- timing-function，规定过渡时速度效果的速度曲线
transtion-delay，规定过渡效果在延迟几秒后开始
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid yellowgreen;
margin: 100px auto;
transition-property: width,height,background-color;
transition-duration: 4s,2s,4s;
transition-delay: 1s;
transition-timing-function:linear;
}
.box:hover{
width: 300px;
height: 300px;
background-color: yellowgreen;
box-shadow: 10px 10px yellowgreen;
}
</style>
transition属性是可以连写的，上面的代码连写是如下形式
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid yellowgreen;
margin: 100px auto;
transition: width 4s 1s linear,
height 2s 1s linear,
background-color 4s 1s linear;
}
.box:hover{
width: 300px;
height: 300px;
background-color: yellowgreen;
box-shadow: 10px 10px yellowgreen;
}
</style>
trasition-timing-function属性有一个方法是W3C里没有写的，steps（num，start）能够传入两个参数，num表示将过渡动画等分为几步进行，传入的必须是正整数，start可串入两个参数，start和end，start表示过渡动画开始时开始第一帧，end表示过渡动画第一帧结束时开始
transform
2D/3D转换
在2D情况下的使用，有四个属性
trasnlate(x,y)，接收两个参数，第一个代表在x轴方向上移动的距离，第二个代表在y轴方向上移动的距离，注意，如果传入的是百分比的话是会以盒子本身的大小来计算移动的距离的
rotate(num)，接收一个参数，代表旋转的角度，以deg为单位
scale(x,y)，接收两个参数，接收的是数字，我的理解是如果是一个四边形的话分别代表宽和高的缩放倍数
skew(x,y)，接收两个参数，第一个代表x轴的倾斜，第二个代表y轴的倾斜
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid yellowgreen;
margin: 100px auto;
transition: all 1s;
}
.box:hover{
transform: translate(0,-50%);
transform: rotate(-30deg);
transform: scale(2,2);
transform: skew(0,45deg);
}
</style>
transform属性可以进行属性连写，单写的话，下面的会覆盖掉上面的，连写的会同时执行，上面的代码连写如下
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid yellowgreen;
margin: 100px auto;
transition: all 1s;
}
.box:hover{
transform: translate(0,-50%) rotate(-30deg) skew(0,45deg) scale(2,2);
}
</style>
在使用属性连写的时候我们需要注意的是每一个属性的先后顺序是会对执行的结果有影响的，如果我们先写rotate再写translate，盒子会先旋转，然后再朝着旋转后的x，y轴的方向移动
在3D的情况下使用
首先我们来了解一下x，y，z坐标轴，我们直接上图会比较直观
3维坐标.png
这个就是我们在编程中的各个轴，每一个transform的属性都有一个对应的每个轴方向的属性，例如translateX，translateY，translateZ，rotateX等，这些属性相比于之前的translate属性更多的是细化了以哪个轴为原点进行变换
接下来我们需要了解一下perspective属性，这个属性是C3中用来规定盒子距离我们电脑屏幕的距离，如下图所示
perspective.png
在盒子的父元素设置了perspective属性的情况下，使用变换属性会有3D效果，也就是我们在现实中近大远小的效果，perspective设置的值越大，表示盒子距离我们越远，所产生的3D效果也就越不明显
<style>
body{
perspective:500px;/*注意perspective属性需要设置给要进行变换的盒子的父元素*/
}
.box{
width: 200px;
height: 200px;
border: 1px solid yellowgreen;
margin: 100px auto;
transition: all 1s;
}
.box:hover{
transform: translateZ(400px);
}
</style>
想要实现3D立体结构，我们需要设置一个属性，trasnform-style，这个属性有两个值，flag|preserve-3d，其中flag是默认值，代表所有的元素都在2D平面下进行呈现，沿着x或y轴方向旋转该元素将导致位于正或负z轴位置的子元素显示在该元素的平面上，而不是它的前面或后面，如果设置为perserve-3D表示它所有的子元素位于3D空间中
transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素
<style>
body{
perspective:500px;
}
.box{
width: 200px;
height: 200px;
/*border: 1px solid yellowgreen;*/
margin: 100px auto;
transition: all 4s;
transform-style: preserve-3d;
position: relative;
/*perspective:500px;*/
}
.img{
position: absolute;
}
.img:nth-child(1){
transform: translateZ(100px);
}
.img:nth-child(2){
transform: translateZ(-100px);
}
.img:nth-child(3){
transform: rotateY(90deg) translateZ(100px);
}
.img:nth-child(4){
transform: rotateY(90deg) translateZ(-100px);
}
.box:hover{
transform: rotateY(45deg) rotateX(45deg);
}
</style>
animation
<style>
div{
width: 100px;
height: 100px;
border: 1px solid #000;
/*animation-name: move;/*设置动画的名称*/
animation-duration:10s;/*设置动画的时间*/
animation-iteration-count: infinite；/*设置动画的次数，设置为infinite表示无限次*/
animation-delay:3s;/*设置动画的延迟执行时间*/
animation-fill-mode: forwards;/*设置动画结束后元素是否保持改变后的形状，默认恢复原状，设置为forwrds表示动画结束后保持改变后的形状*/
animation: move 10s infinite 3s forwards;/*动画属性的连写，注意动画的时间长度要写在动画延迟执行的时间前边*/
}
@keyframes move{/*通过获取动画名称来来设置动画执行的每个过程时的变换*/
10%{
width: 200px;
}
40%{
height: 200px;
}
80%{
background-color: yellow;
}
100%{
width: 200px;
height: 200px;
background-color: yellowgreen;
border-radius: 100%;
}
}
</style>
animation还有一个属性，animation-play-state，该属性有两个值，paused|runing，paused可以控制动画的暂停，runing可以使动画恢复
网友评论