首页 > 代码库 > 自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法
自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div{ width: 200px; height: 100px; background: pink; border: 1px solid #ccc; margin-bottom: 10px; } .box1{ transform: translate(20px, 15px); -webkit-transform: translate(20px, 15px); -moz-transform: translate(20px, 15px); -ms-transform: translate(20px, 15px); -o-transform: translate(20px, 15px); } .box2{ transform: translate3d(5px, 10px, 500px); -webkit-transform: translate3d(5px, 10px, 500px); -moz-transform: translate3d(5px, 10px, 500px); -ms-transform: translate3d(5px, 10px, 500px); -o-transform: translate3d(5px, 10px, 500px); } .box3{ transform: translateX(30px); -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); } .box4{ transform: scale(2.0, 2.0); -webkit-transform: scale(2.0, 2.0); -moz-transform: scale(2.0, 2.0); -ms-transform: scale(2.0, 2.0); -o-transform: scale(2.0, 2.0); } .box5{ transform: scale3d(1, 1, 2.0); -webkit-transform: scale3d(1, 1, 2.0); -moz-transform: scale3d(1, 1, 2.0); -ms-transform: scale3d(1, 1, 2.0); -o-transform: scale3d(1,1, 2.0); } .box6{ transform: scaleZ(2); -webkit-transform: scaleZ(2); -moz-transform: scaleZ(2); -ms-transform: scaleZ(2); -o-transform: scaleZ(2); } .box7{ transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); } .box8{ transform: rotate3d(1, 1, -1, 30deg); -webkit-transform: rotate3d(1, 1, -1, 30deg); -moz-transform: rotate3d(1, 1, -1, 30deg); -ms-transform: rotate3d(1, 1, -1, 30deg); -o-transform: rotate3d(1, 1, -1, 30deg); } .box9{ transform: rotateX(80deg); -webkit-transform: rotateX(80deg); -moz-transform: rotateX(80deg); -ms-transform: rotateX(80deg); -o-transform: rotateX(80deg); } .box10{ transform: skew(30deg, 30deg); -webkit-transform: skew(30deg, 30deg); -moz-transform: skew(30deg, 30deg); -ms-transform: skew(30deg, 30deg); -o-transform: skew(30deg, 30deg); } .box11{ transform: skewX(45deg); -webkit-transform: skewX(45deg); -moz-transform: skewX(45deg); -ms-transform: skewX(45deg); -o-transform: skewX(45deg); } .box12{ position: relative; padding: 20px; perspective: 150; -webkit-perspective: 150; } .box12>div{ width: 160px; height: 60px; border: 1px solid #ddd; background: #09f; transform: rotateX(45deg); -webkit-transform: rotateX(45deg); -moz-transform: rotateX(45deg); -ms-transform: rotateX(45deg); -o-transform: rotateX(45deg); } .box13{ background: #09f; width: 200px; transition: width 2s,background 2s; -webkit-transition: width 2s,background 2s; -moz-transition: width 2s,background 2s; -ms-transition: width 2s,background 2s; -o-transition: width 2s,background 2s; } .box13:hover{ width: 400px; background: blue; } .box14{ position: relative; animation: move 5s linear infinite alternate;; -webkit-animation: move 5s linear infinite alternate;; -moz-animation: move 5s linear infinite alternate;; -ms-animation: move 5s linear infinite alternate;; -o-animation: move 5s linear infinite alternate; } /* animation-play-state: paused|running;设置对象动画的状态，下例hover运动暂停 */ .box14:hover{ animation-play-state: paused; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; } @keyframes move { from{left: 0px;} to{left: 500px;} } @-webkit-keyframes move{ 0%{left: 0px;} 100%{left: 500px;} } .box15 span{ display: block; font-weight: bolder; font-size: 20px; } .a1{ transform: translate(60px); -webkit-transform: translate(60px); -moz-transform: translate(60px); animation: move1 2s ease-out forwards; -webkit-animation: move1 2s ease-out forwards; -moz-animation: move1 2s ease-out forwards; } @keyframes move1{ 0%{transform: translate(0px);opacity: 0;} 40%{transform: translate(20px);opacity: 0.4;} 70%{transform: translate(40px);opacity: 1.0;} 100%{transform: translate(60px);opacity: 0;} } @-webkit-keyframes move1{ 0%{-webkit-transform: translate(0px);opacity: 0;} 40%{-webkit-transform: translate(20px);opacity: 0.4;} 70%{-webkit-transform: translate(40px);opacity: 1.0;} 100%{-webkit-transform: translate(60px);opacity: 0;} } @-moz-keyframes move1{ 0%{-moz-transform: translate(0px);opacity: 0;} 40%{-moz-transform: translate(20px);opacity: 0.4;} 70%{-moz-transform: translate(40px);opacity: 1.0;} 100%{-moz-transform: translate(60px);opacity: 0;} } .a3{ opacity: 0; transform: translate(20px); -webkit-transform: translate(20px); -moz-transform: translate(20px); animation: move3 2s ease-in 2s forwards; -webkit-animation: move3 2s ease-in 2s forwards; -moz-animation: move3 2s ease-in 2s forwards; } @keyframes move3{ 0%{transform: translate(120px);opacity: 0;} 40%{transform: translate(80px);opacity: 0.4;} 70%{transform: translate(40px);opacity: 1.0;} 100%{transform: translate(20px);opacity: 0;} } @-webkit-keyframes move3{ 0%{-webkit-transform: translate(120px);opacity: 0;} 40%{-webkit-transform: translate(80px);opacity: 0.4;} 70%{-webkit-transform: translate(40px);opacity: 1.0;} 100%{-webkit-transform: translate(20px);opacity: 0;} } @-moz-keyframes move3{ 0%{-moz-transform: translate(120px);opacity: 0;} 40%{-moz-transform: translate(80px);opacity: 0.4;} 70%{-moz-transform: translate(40px);opacity: 1.0;} 100%{-moz-transform: translate(20px);opacity: 0;} } .a2{ opacity: 0; font-size: 36px; text-align: center; animation: move2 2s ease-in 4s forwards; -webkit-animation: move2 2s ease-in 4s forwards; -moz-animation: move2 2s ease-in 4s forwards; } @keyframes move2{ 0%{opacity: 0;} 20%{opacity: 0.6;} 40%{opacity: 0.8;} 60%{opacity: 0.4;} 80%{opacity: 0.8;} 100%{opacity: 1.0;} } @-webkit-keyframes move2{ 0%{opacity: 0;} 20%{opacity: 0.6;} 40%{opacity: 0.8;} 60%{opacity: 0.4;} 80%{opacity: 0.8;} 100%{opacity: 1.0;} } @-moz-keyframes move2{ 0%{opacity: 0;} 20%{opacity: 0.6;} 40%{opacity: 0.8;} 60%{opacity: 0.4;} 80%{opacity: 0.8;} 100%{opacity: 1.0;} } </style> </head> <body> <!-- transform属性向元素应用2D或3D转换，我们可以旋转、缩放、移动、倾斜元素，语法：transform: none|transform-functions; --> <!-- translate(x,y)--定义2D位移 --> <div class="box1">translate(x,y)</div> <!-- translate(x,y,z)--定义3D位移 --> <div class="box2">translate(x,y,z)</div> <!-- translateX(x)--定义只按X轴位移 (同理按Y轴，3D的Z轴)--> <div class="box3">translateX(x)</div> <!-- scale(x,y)--定义2D缩放转换 --> <div class="box4">scale(x,y)</div> <!-- scale3d(x,y,z)--定义3D缩放转换 --> <div class="box5">scale3d(x,y,z)</div> <!-- scaleZ(z)--定义只按Z轴缩放（同理按Y轴，X轴） --> <div class="box6">scaleZ(z)</div> <!-- rotate(angle)--定义2D旋转 --> <div class="box7">rotate(angle)</div> <!-- rotate3d(angle)--定义3D旋转 x,y,z的值组成在3d空间的矢量坐标，对象将会围绕这个坐标轴旋转--> <div class="box8">rotate3d(x,y,z,angle)</div> <!-- rotateX(angle) 定义沿X轴的3d旋转(同理设置Y轴Z轴的3d旋转)--> <div class="box9">rotateX(angle)</div> <!-- skew(x-angle,y-angle) 定义沿X轴和Y轴的倾斜转换--> <div class="box10">skew(x-angle,y-angle)</div> <!-- skewX(xangle) 定义沿X轴的2d倾斜转换(同理设置Y轴的2d倾斜转换)--> <div class="box11">skewX(angle)</div> <!-- perspective(n)为3D转换元素定义透视视图(当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身) --> <div class="box12"> <div>perspective(n)</div> </div> <!-- transition属性对元素设置对象变换时的过渡,用于设置4个过渡属性： transition-property--参与过渡的属性、 transition-duration--对象过渡的持续时间、 transition-timing-function--对象中过渡的动画类型、 transition-delay--对象延迟过渡的时间 --> <!-- 如果只提供一个<time>参数，则为 <‘ transition-duration ‘> 的值定义；如果提供二个<time>参数，则第一个为 <‘ transition-duration ‘> 的值定义，第二个为 <‘ transition-delay ‘> 的值定义 --> <div class="box13">transition过渡效果</div> <!-- animation 设置对象元素的动画特效，用于设置6个动画属性（默认值none 0 ease 0 1 normal）： animation-name--需要绑定到选择器上的动画名称、 animation-duration--完成动画所花费的时间、 animation-timing-function--规定动画的速度曲线、 animation-delay--规定在动画开始前的延迟、 animation-iteration-count--规定动画播放的次数、 animation-direction--规定动画是否轮流反向播放 ( forwards--当动画完成后，保持最后一个属性值 )--> <div class="box14">animation动画特效</div> <div class="box15"> <span class="a1">css3 animation</span> <span class="a2">css3 animation</span> <span class="a3">css3 animation</span> </div> </body> </html>
自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。