悬赏做logo的网站,东城建设网站,都昌网站建设,静态网站怎么做优化CSS3特效之转化#xff08;transform#xff09;和过渡#xff08;transition#xff09;
在对动画深入之前#xff0c;我们需要先了解它的一些特性#xff0c;CSS3的转化#xff08;transform#xff09;和过渡#xff08;transition#xff09;。有人可能会有疑…CSS3特效之转化transform和过渡transition
在对动画深入之前我们需要先了解它的一些特性CSS3的转化transform和过渡transition。有人可能会有疑问CSS3动画不是只有animation一个属性吗怎么又和转化transform和过渡transition扯上关系了其实并非如此转化transform属性让动画的变换多元化而过渡transition属性是动画中的一种表现形式也可以说成是动画一个版本。多元化相信大家都能理解这边就不提了为什么说过渡transition属性是动画的一个版本这个在了解了转化transform和过渡transition基本知识后我再陈述其中的原因。
言归正传现在我们就开始认识下CSS3中的转化transform和过渡transition两个属性。 开发商前缀的特定浏览器样式 理解CSS3属性之前我们需要先理解什么是开发商前缀为什么会有开发商前缀开发商前缀顾名思义和各大浏览器的开发商相关是各大浏览器用来标识自身的一种特殊标记。那么为什么会出现开发前缀这种标记呢其实这和CSS3标准制定流程有关系制定CSS标准的那群人在引入新功能时需要听取浏览器开发商和Web设计人员的反馈之后更需要让浏览器开发商和Web设计人员实现不完美的功能这样就会形成一个试验和反馈循环。在此期间Web设计人员使用新功能在网站中如果将来标准发生改变就会导致网站无法使用所有浏览器开发商就使用了开发商前缀的方法来避免这一问题的发生。
开发商前缀 转化transform 定义和用法transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
transform 2D转换方法 浏览器支持 Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性仅适用于 2D 转换。Safari 和 Chrome 支持替代的 -webkit-transform 属性3D 和 2D 转换。Opera 只支持 2D 转换。过渡transition 定义和用法transition 属性是一个简写属性用于设置四个过渡属性transition-property、transition-duration、transition-timing-function、transition-delay
语法transition: property duration timing-function delay;
属性值 测试Demo HTML代码 div classboxspan classcircle/span/div
CSS代码 .box{width: 360px;height: 100px;background-color: palegreen;text-align: center;position: relative;}.box .circle{position: absolute;width: 30px;height: 30px;border-radius: 30px;background-color: pink;left: 0;top: 35px;-moz-transition:ease-out 1s;-o-transition:ease-out 1s;-webkit-transition:ease-out 1s;transition:ease-out 1s;}.box:hover .circle{left: 270px;background-color: red;-moz-transform:scale(1.5);-o-transform:scale(1.5);-webkit-transform:scale(1.5);transform: scale(1.5);}
动画替代过渡transition属性
CSS代码只做测试不考虑各大浏览器的前缀 .mouse-over{animation:moveR ease-out 1s forwards;}.mouse-out{animation:moveL ease-out 1s forwards;}keyframes moveR {from{left: 0;}to{left: 270px;}}keyframes moveL {from{left: 270px;}to{left: 0;}} 过渡transition可以分解为两个动画效果在不停的相互交换鼠标移入时的效果等同于添加动画.mouse-over移出是等同添加动画.mouse-out。当然在过渡transition中DOM节点所到达的目标位置和运行的时间相关所有如果需要精确分解整个动画过程相对还是比较复杂的。 总结 转化transform是为了丰富DOM节点的变换方式过渡transition是操作DOM节点样式的运动。在当下大量的浏览器会涉及到动画都会采用CSS3新特性来实现相对于JQuery封装的动画效果它的运动更加流畅减小JQuery带来的计算负荷。对于移动端CSS3新特性使用更加普遍为了能更好的渲染网站很多优秀的前端工程师都会选择对应的属性来调取手机GPU让这些效果被渲染的更流畅。 文章属于转载本人无版权
