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>