CSS3中transition、transform分不清楚?
前言
css属性很多,无论是字母的拼写还是字面上的意思,很多人都容易混淆,包括我在内,也时不时需要去看看到底是咋回事,是不是也混淆过你~
下面列举几个最容易混淆的属性:
属性含义animation(动画)用于设置动画属性,他是一个简写的属性,包含6个属性transition(过渡)用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同transform(变形)用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表”translate(移动)translate只是transform的一个属性值,即移动。
下面详细介绍。
animation(动画)
语法:animation: name duration timing-function delay iteration-count direction;
- name(需要绑定到选择器的 keyframe 名称)
- duration(完成动画所花费的时间,以秒或毫秒计)
- function(动画的速度曲线)
- delay(动画开始之前的延迟)
- count(动画应该播放的次数)
- direction(是否应该轮流反向播放动画)
div {
width: 100px;
height: 100px;
background: #1199ff;
position: relative;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
@-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
transition(过渡)
语法:transition: property duration timing-function delay;
- property(设置过渡效果的 CSS 属性的名称)
- duration(完成过渡效果需要多少秒或毫秒)
- function(速度效果的速度曲线)
- delay(过渡效果何时开始)
div {
width: 100px;
height: 100px;
background: #ee1166;
transition: width 2s;
-moz-transition: width 2s;
/* Firefox 4 */
-webkit-transition: width 2s;
/* Safari and Chrome */
-o-transition: width 2s;
/* Opera */
}
div:hover {
width: 300px;
}
transform(变形)
语法:transform: none|transform-functions;
functions提供多种方法,如:skewX(angle)沿着 X 轴的 2D 倾斜转换,translate3d(x,y,z)3D 转换,rotate(angle)2D 旋转,在参数中规定角度等等
/**css*/
ul {
margin: 20px 0 0 20px;
padding: 0;
list-style: none;
}
li {
float: left;
width: 100px;
text-align: center;
height: 30px;
line-height: 30px;
margin-right: 4px;
background: #ee1166;
-webkit-transform: skewX(30deg);
}
a {
text-decoration: none;
-webkit-transform: skewX(-30deg);
display: block;
color: #fff;
}
li:hover{
background: #008cf4;
}
/**html*/
<ul>
<li><a href="#">Javan的博客</a></li>
<li><a href="#">今日头条</a></li>
<li><a href="#">慕课网</a></li>
<li><a href="#">开源中国</a></li>
</ul>
translate(移动)
translate
其实是 transform
的一种属性值,进去2D或者3D移动
- translate(x,y) 2D平移,x/y分别是x坐标平移多少像素,y坐标平移多少像素
- translate3d(x,y,z) 3D平移,和2D一样
获取对应值
//获取 transform: translate();的属性值,也可以获取某元素在可视窗口的位置
某元素.getBoundingClientRect().left/.top/.right/.bottom/.width./height
谢谢阅读!