02.transition动画 · 程序员开发笔记

[TOC] #### transition过渡效果过渡效果： • 过渡效果允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值 transition简写形式: • transition: transition-property transition-duration transition-timing-function transition-delay transition-property: • 指定应用过渡的属性，值为：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。 transition-duration: • 指定元素转换过程的持续时间，单位为s（秒）或者ms(毫秒) transition-delay： • 指定动画开始执行前的延迟时间，单位为s（秒）或者ms(毫秒) #### transition过渡动画 transition-timing-function: • transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率， transition-timing-function有6个可能值： • ease：（逐渐变慢）默认值，等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) • linear：（匀速） • ease-in：(加速) • ease-out：（减速） • ease-in-out：（加速然后减速） #### transform过渡效果配置 transform：变形效果语法：transform: rotate | scale | skew | translate 说明： rotate(<angle>) ：指定一个2D旋转，正数顺时针，负数逆时针旋转 translate(x,y)：设置移动效果 scale(number,number)：缩放效果 skew(angle,angle) 扭曲效果 skew(30deg,60deg) transform-origin：设置旋转元素的基点位置语法：transform-origin: 20% 40%; <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 300px; height: 200px; background: dodgerblue; /*transition用来监控属性的变化,如果被监控的属性发生变化,那么就是通过运动,运动过去*/ /*transition: width 2s;*/ transition: all 2s; } </style> </head> <body> <input type="button" value="宽度变化" id="btn" /> <br /><br /> <div id="box"></div> <script type="text/javascript"> var btn = document.getElementById("btn"); var box = document.getElementById("box"); btn.onclick = function(){ box.style.width = '1000px'; box.style.height = '600px'; box.style.background = 'orangered'; } </script> </body> </html> #### 旋转基准点设置 transform-origin：设置旋转元素的基点位置 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } body{ background: #666; } #hd{ width: 550px; height: 550px; position: relative; background: url(biaopan.png) no-repeat; background-size: 100% 100%; margin: 50px auto; } #hd img{ position: absolute; left: 266px; top: 233px; width: 16px; animation: z 60s linear infinite; transform-origin: 8px 41px; } @keyframes z{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } } </style> </head> <body> <div id="hd"> <img src="zhizhen.png" alt="" /> </div> </body> </html>