css3中的transform、transition、translate、animation
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3中的transform、transition、translate、animation相关的知识，希望对你有一定的参考价值。
参考技术A transform：属性应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)、倾斜,扭曲(skew)，设置基点位置transform-origin:50% top;rotate: 是transform的值，定义2D或3D的旋转，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
2D：rotate( angle )定义 2D 旋转，在参数中规定角度。
3D：rotate3d( x , y , z , angle )定义 3D 旋转。
事例：2D:transform: rotate(45deg);3D:ransform: rotate3d(0,0,0,45deg)
scale: 是transform的值，定义 2D 或3D缩放，表示对当前元素的缩放。
2D：scale(x,y)定义 2D 缩放，对当前元素的宽度是原始大小的x倍，高度是原始大小的y倍。
3D：scale3d( x , y , z )定义 3D 缩放，对当前元素在x轴，y轴，z轴的缩放。
事例：2D:scale: scale(2,3);3D:ransform: scale3d(0,0,1)
translate ：是transform的值，定义 2D 或3D转换，表示对当前元素的位移。
2D：translate( x , y )定义 2D 转换，沿着 X 和 Y 轴移动元素。
3D：translate3d( x , y , z )定义 3D 转化。
事例：2D:transform: translate(50px,100px);3D:ransform: translate3d(50px,100px,50px)
skew： 是transform的值，定义倾斜，表示对当前元素的倾斜角度。
skew( x-angle , y-angle )定义 2D 倾斜，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
事例：transform: skew(1deg,2deg)
transition属性：允许CSS属性值在一定的时间区间内平滑的过渡，只能设置 初始值和结束值，需要事件的触发，例如单击、获取焦点、失去焦点等
transition : transition-property transition-duration transition-timing-function transition-delay ;
transition-property :规定应用过渡的 CSS 属性的名称。
transition-duration :定义过渡效果花费的时间。默认是 0。
transition-timing-function :规定过渡效果的时间曲线。默认是 "ease"。
transition-delay :规定过渡效果延迟的时间。默认是 0。
事例： transition : width 2s ease-in-out 1s
animation属性：通过帧动画对当前元素的某些属性进行帧动画的播放，功能相似于transition，但更加的精确、可以控制到每一帧，高版本的浏览器还支持css或者JS控制停止动画 以及获取动画当前 状态等，请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
@keyframes fadeIn
0% opacity:0;
100% opacity:1;
事例：animation:fadeIn 5s infinite;（fadeIn是帧动画的名称）infinite 无限循环
@keyframes fadeIn
0% opacity:0;
100% opacity:1;
@keyframes fadeout
0% opacity:1;
100% opacity:0;
@keyframes pendulu
from transform:rotate3d(0,0,1,0);
5.5% transform:rotate3d(0,0,1,-11deg);
7% transform:rotate3d(0,0,1,-12deg);
16% transform:rotate3d(0,0,1,9deg);
17.5% transform:rotate3d(0,0,1,10deg);
26.5% transform:rotate3d(0,0,1,-7deg);
28% transform:rotate3d(0,0,1,-8deg);
36.5% transform:rotate3d(0,0,1,5deg);
38% transform:rotate3d(0,0,1,6deg);
46.5% transform:rotate3d(0,0,1,-4deg);
48% transform:rotate3d(0,0,1,-5deg);
57% transform:rotate3d(0,0,1,3deg);
58.5% transform:rotate3d(0,0,1,4deg);
66.5% transform:rotate3d(0,0,1,-2deg);
68% transform:rotate3d(0,0,1,-3deg);
75% transform:rotate3d(0,0,1,1.5deg);
76.5% transform:rotate3d(0,0,1,2.5deg);
82.5% transform:rotate3d(0,0,1,-1deg);
84% transform:rotate3d(0,0,1,-2deg);
90% transform:rotate3d(0,0,1,1.5deg);
95% transform:rotate3d(0,0,1,-1deg);
to transform:rotate3d(0,0,1,0);
@keyframes scale
0% transform:scale(0.9);
100% transform:scale(1);
@keyframes cloud
0% transform:translateX(0);
25% transform:translateX(30%);
50% transform:translateX(60%);
75% transform:translateX(30%);
100% transform:translateX(0);
@keyframes fadeInDown
0%
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
100%
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: none;
/* transform: none; */
@-webkit-keyframes bounceIn
0%,20%,40%,60%,80%,100%
-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);
transition-timing-function:cubic-bezier(.215,.61,.355,1)
0%
opacity:0;
filter:alpha(opacity=0);
-webkit-transform:scale3d(2,2,2);
transform:scale3d(2,2,2)
40%
-webkit-transform:scale3d(.9,.9,.9);
transform:scale3d(.9,.9,.9)
60%
-webkit-transform:scale3d(1.03,1.03,1.03);
transform:scale3d(1.03,1.03,1.03)
80%
opacity:1;
filter:alpha(opacity=100);
-webkit-transform:scale3d(.97,.97,.97);
transform:scale3d(.97,.97,.97)
100%
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
.rotate2d
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
-webkit-animation-name:rotate2d;
animation-name:rotate2d
.box-bottle
position:absolute;
left:70%;
width:pr(99);
height:pr(97);
background:url("#$imgPathbtn-bottle.png")no-repeat;
background-size:100%;
transform-origin:35% 68%;
opacity:0;
z-index:10;
div
position:absolute;
width:pr(18);
height:pr(35);
transform:translate3d(-150%,-20%,0)rotate3d(0,0,1,100deg);
transition:opacity .5s linear 1.5s;
i
position:absolute;
width:pr(18);
height:pr(35);
background-repeat:no-repeat;
background-size:100%;
transform-origin:3000% 50%;
opacity:0;
&:nth-child(1)
transition:transform 1s ease-out 1s,opacity .2s linear .9s;
background-image:url("#$imgPathwater1.png");
&:nth-child(2)
transition:transform 1.1s ease-out .9s,opacity .2s linear .8s;
background-image:url("#$imgPathwater2.png");
&:nth-child(3)
transition:transform 1.2s ease-out .8s,opacity .2s linear .7s;
background-image:url("#$imgPathwater3.png");
&:nth-child(4)
transition:transform 1.3s ease-out .7s,opacity .2s linear .6s;
background-image:url("#$imgPathwater4.png");
&:nth-child(5)
transition:transform 1.4s ease-out .6s,opacity .2s linear .5s;
background-image:url("#$imgPathwater5.png");
&:nth-child(6)
transition:transform 1.5s ease-out .5s,opacity .2s linear .4s;
background-image:url("#$imgPathwater6.png");
&.active
opacity:1;
animation:pour 2.5s both;
div
opacity:0;
i
opacity:1;
&:nth-child(1)
transform:rotate3d(0,0,1,-25deg);
&:nth-child(2)
transform:rotate3d(0,0,1,-25deg)translate3d(130%,50%,0);
&:nth-child(3)
transform:rotate3d(0,0,1,-25deg)translate3d(260%,0,0);
&:nth-child(4)
transform:rotate3d(0,0,1,-25deg)translate3d(0,150%,0);
&:nth-child(5)
transform:rotate3d(0,0,1,-25deg)translate3d(130%,200%,0);
&:nth-child(6)
transform:rotate3d(0,0,1,-25deg)translate3d(260%,150%,0);
以上是关于css3中的transform、transition、translate、animation的主要内容，如果未能解决你的问题，请参考以下文章
大学没学过数学也要理解 CSS3 transform 中的 matrix
css3中的属性 变形(transform)过渡(transtion)动画(animation)