文章目录
transform 转换
顺时针旋转某deg度 ,负值逆时针
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
根据(X轴)和(Y轴)位置给定的参数,从当前元素位置移动。
细分:translateX(x)、ranslateY(y)
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
#div2
{
-ms-transform:translate(10%,10%); /* IE 9 */
-webkit-transform: translate(10%,10%); /* Safari */
transform: translate(10%,10%); /* 标准语法 */
}
元素宽度增加或减少a倍的大小,元素高度增加或减少b倍的大小
细分:scaleX(n)、scaleY(n)、
div{
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
}
表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜
细分:skewX(angle)、skewY(angle)
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
matrix(2,0,0,1.5,600,90):
/*宽2倍,x轴旋转0,y轴旋转0,高1.5倍,x左移动600px,y下移90px*/
transition过渡
宽度属性的过渡效果,时长为 2 秒
div
{
width:100px;
height:100px;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover
{
width:300px;
}
.div2 {
width: 100px;
height: 100px;
background: red;
/* 多个样式的变换效果,添加的属性由逗号分隔*/
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
.div2:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
transition细化
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;/*过渡的 CSS 属性的名称v */
-webkit-transition-duration:1s;/*过渡效果花费的时间。默认是 0。*/
-webkit-transition-timing-function:linear;/*过渡效果的时间曲线。默认是 "ease" */
-webkit-transition-delay:2s;/*规定过渡效果何时开始。默认是 0。 */
}
全部两秒
transition: all 2s;
animation动画
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
细分:
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
/*规定动画的速度曲线。默认是 "ease"。 */
animation-timing-function:linear;
/*动画延迟。默认是 0。 */
animation-delay:2s;
/*规定动画被播放的次数。默认是 1。 */
animation-iteration-count:infinite;
/*规定动画是否在下一周期逆向地播放。默认是 "normal"。 */
animation-direction:alternate;
/*规定动画是否正在运行或暂停。默认是 "running"。 */
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}