ตัวอย่างการเปลี่ยน CSS3 CSS3 - การเปลี่ยนภาพ การเปลี่ยนชื่อคุณสมบัติ-คุณสมบัติ

การเปลี่ยน CSSให้วิธีการควบคุมความเร็วของภาพเคลื่อนไหวเมื่อเปลี่ยนคุณสมบัติ CSS แทนที่จะให้การเปลี่ยนแปลงทรัพย์สินมีผลทันที คุณสามารถทำให้การเปลี่ยนแปลงในทรัพย์สินเกิดขึ้นในช่วงระยะเวลาหนึ่งตัวอย่างเช่น หากคุณเปลี่ยนสีขององค์ประกอบจากสีขาวเป็นสีดำ โดยปกติแล้วการเปลี่ยนแปลงจะเกิดขึ้นทันที เมื่อเปิดใช้งานการเปลี่ยน CSS การเปลี่ยนแปลงจะเกิดขึ้นตามช่วงเวลาที่เป็นไปตามเส้นโค้งการเร่งความเร็ว ซึ่งทั้งหมดนี้สามารถปรับแต่งได้

ภาพเคลื่อนไหวที่เกี่ยวข้องกับการเปลี่ยนระหว่างสองสถานะมักเรียกว่า การเปลี่ยนแปลงโดยนัยเนื่องจากสถานะระหว่างสถานะเริ่มต้นและสถานะสุดท้ายถูกกำหนดโดยเบราว์เซอร์โดยปริยาย

การเปลี่ยน CSS ช่วยให้คุณตัดสินใจได้ว่าคุณสมบัติใดที่จะทำให้เคลื่อนไหว (โดย แสดงรายการไว้อย่างชัดเจน) เมื่อภาพเคลื่อนไหวจะเริ่มขึ้น (โดยตั้งค่า a ล่าช้า)การเปลี่ยนแปลงจะคงอยู่นานเท่าใด (โดยการตั้งค่า a ระยะเวลา) และการเปลี่ยนแปลงจะดำเนินการอย่างไร (โดยการกำหนด a ฟังก์ชั่นจับเวลาเช่น เชิงเส้นหรือเร็วในช่วงเริ่มต้น ช้าในตอนท้าย)

คุณสมบัติ CSS ใดที่สามารถเปลี่ยนได้

ผู้เขียนเว็บสามารถกำหนดได้ว่าคุณสมบัติใดที่จะต้องเคลื่อนไหวและในลักษณะใด ซึ่งช่วยให้สามารถสร้างช่วงการเปลี่ยนภาพที่ซับซ้อนได้ เนื่องจากมันไม่สมเหตุสมผลเลยที่จะสร้างภาพเคลื่อนไหวให้กับคุณสมบัติบางอย่าง รายการของคุณสมบัติที่สามารถเคลื่อนไหวได้จึงจำกัดอยู่เพียงชุดจำกัด

หมายเหตุ: ชุดของคุณสมบัติที่สามารถเคลื่อนไหวได้จะเปลี่ยนแปลงไปตามการพัฒนาข้อกำหนด

ค่าอัตโนมัติมักเป็นกรณีที่ซับซ้อนมาก ข้อกำหนดนี้ไม่แนะนำให้สร้างภาพเคลื่อนไหวจากและเป็นอัตโนมัติ User Agent บางตัว เช่น ที่ใช้ Gecko ปรับใช้ข้อกำหนดนี้ ส่วนตัวแทนผู้ใช้อื่นๆ เช่น ที่ใช้ WebKit เข้มงวดน้อยกว่า การใช้ภาพเคลื่อนไหวแบบอัตโนมัติอาจทำให้เกิดผลลัพธ์ที่คาดเดาไม่ได้ ทั้งนี้ขึ้นอยู่กับเบราว์เซอร์และเวอร์ชันของเบราว์เซอร์ และควรหลีกเลี่ยง

การกำหนดช่วงการเปลี่ยนภาพ

การเปลี่ยน CSS ถูกควบคุมโดยใช้คุณสมบัติการเปลี่ยนชวเลข นี่เป็นวิธีที่ดีที่สุดในการกำหนดค่าการเปลี่ยนภาพ เนื่องจากช่วยให้หลีกเลี่ยงพารามิเตอร์ที่ไม่ซิงค์ได้ง่ายขึ้น ซึ่งอาจเป็นเรื่องที่น่าหงุดหงิดมากที่ต้องใช้เวลามากในการแก้ไขจุดบกพร่องใน CSS

คุณสามารถควบคุมแต่ละองค์ประกอบของการเปลี่ยนแปลงได้ด้วยคุณสมบัติย่อยต่อไปนี้:

(โปรดทราบว่าการเปลี่ยนภาพเหล่านี้จะวนซ้ำอย่างไม่สิ้นสุดเพื่อวัตถุประสงค์ในตัวอย่างของเราเท่านั้น การเปลี่ยนผ่าน CSS จะแสดงภาพการเปลี่ยนแปลงคุณสมบัติตั้งแต่ต้นจนจบเท่านั้น หากคุณต้องการการแสดงภาพนั้นวนซ้ำ ให้ดูที่คุณสมบัติภาพเคลื่อนไหว CSS)

transition-duration ระบุระยะเวลาที่การเปลี่ยนควรจะเกิดขึ้น คุณสามารถระบุระยะเวลาเดียวที่ใช้กับคุณสมบัติทั้งหมดระหว่างการเปลี่ยน หรือหลายค่าเพื่อให้แต่ละคุณสมบัติเปลี่ยนในช่วงเวลาที่แตกต่างกันได้

สีพื้นหลัง สีตัวอักษร ขนาด การแปลงด้านบนซ้าย -webkit-เปลี่ยนสี;

ระยะเวลาการเปลี่ยนแปลง: 1 วินาที;

ระยะเวลาการเปลี่ยนแปลง: 2 วินาที;

ฟังก์ชั่นจับเวลา

) else ( el = document.querySelector("div.box1"); el.className = "box"; ) กลับ el; ) var IntervalID = window.setInterval(updateTransition, 7000);

.parent ( ความกว้าง: 250px; ความสูง: 125px;) .box ( ความกว้าง: 100px; ความสูง: 100px; สีพื้นหลัง: สีแดง; ขนาดตัวอักษร: 20px; ซ้าย: 0px; ด้านบน: 0px; ตำแหน่ง: แน่นอน; -webkit- การเปลี่ยนแปลงคุณสมบัติ: ความกว้างความสูงสีพื้นหลังขนาดตัวอักษรซ้ายบน -webkit-การเปลี่ยนแปลง-ระยะเวลา: 2s; -webkit-transition-timing-function: เชิงเส้น; สี; ระยะเวลาการเปลี่ยนภาพ: 2 วินาที; ระยะเวลาการเปลี่ยนผ่าน: เชิงเส้น; .box1( ความกว้าง: 50px; ความสูง: 50px; สีพื้นหลัง: สีน้ำเงิน; สี: สีเหลือง; ขนาดตัวอักษร: 18px; ซ้าย: 150px; ด้านบน: 25px ; ตำแหน่ง: สัมบูรณ์; -webkit-transition-property: ความกว้าง ความสูง สีพื้นหลัง ด้านซ้ายบน; -webkit-transition-duration: 2s; -timing-function: linear; function updateTransition() ( var el = document.querySelector("div.box"); if (el) el.className = "box1";

if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el.className = "box"; ) ส่งคืน el; ) var IntervalID = window.setInterval(updateTransition, 7000);

ความล่าช้าในการเปลี่ยนแปลง: 0.5 วินาที

การเปลี่ยนแปลงเวลาฟังก์ชั่น: เชิงเส้น; ) ฟังก์ชั่น updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box"; ) ส่งคืน el; ) var IntervalID = window.setInterval(updateTransition, 7000);

การเปลี่ยนแปลงล่าช้า: 2 วินาที

การเปลี่ยนแปลงล่าช้า: 4 วินาที

ฟังก์ชั่นการเปลี่ยนเวลา: ความง่ายในการเข้าออก; ) ฟังก์ชั่น updateTransition() ( var el = document.querySelector("div.box"); if (el) ( el.className = "box1"; ) else ( el = document.querySelector("div.box1"); el .className = "box"; ) ส่งคืน el; ) var IntervalID = window.setInterval(updateTransition, 7000);

ไวยากรณ์ CSS ชวเลขเขียนดังนี้: ; }

Div ( การเปลี่ยนแปลง:

ตัวอย่าง

ตัวอย่างง่ายๆ

ตัวอย่างนี้ดำเนินการเปลี่ยนขนาดแบบอักษรสี่วินาทีโดยมีความล่าช้าสองวินาทีระหว่างเวลาที่ผู้ใช้เลื่อนเมาส์ไปเหนือองค์ประกอบและจุดเริ่มต้นของเอฟเฟกต์ภาพเคลื่อนไหว:

#delay ( ขนาดตัวอักษร: 14px; คุณสมบัติการเปลี่ยนแปลง: ขนาดตัวอักษร; ระยะเวลาการเปลี่ยนแปลง: 4s; ความล่าช้าในการเปลี่ยนแปลง: 2s; ) #delay:hover ( ขนาดตัวอักษร: 36px; )

ตัวอย่างคุณสมบัติภาพเคลื่อนไหวหลายรายการ

เนื้อหา HTML

ตัวอย่าง

.box ( ลักษณะเส้นขอบ: ทึบ; ความกว้างของเส้นขอบ: 1px; จอแสดงผล: บล็อก; ความกว้าง: 100px; ความสูง: 100px; สีพื้นหลัง: #0000FF; การเปลี่ยนแปลง: ความกว้าง 2 วินาที, ความสูง 2 วินาที, สีพื้นหลัง 2 วินาที, แปลง 2 วินาที; ) .box:hover ( สีพื้นหลัง: #FFCCCC; ความกว้าง: 200px; ความสูง: 200px; แปลงร่าง: หมุน(180deg); )

เมื่อรายการมูลค่าทรัพย์สินมีความยาวต่างกัน

หากรายการค่าของคุณสมบัติใด ๆ สั้นกว่ารายการอื่น ๆ ค่าของคุณสมบัตินั้นจะถูกทำซ้ำเพื่อให้ตรงกัน ตัวอย่างเช่น

สิ่งนี้ได้รับการปฏิบัติราวกับว่าเป็น:

Div ( คุณสมบัติการเปลี่ยนแปลง: ความทึบ, ซ้าย, บน, ความสูง; ระยะเวลาการเปลี่ยนแปลง: 3s, 5s, 3s, 5s; )

ในทำนองเดียวกัน หากรายการค่าของคุณสมบัติใดๆ ยาวกว่ารายการค่าของ transition-property รายการค่าดังกล่าวจะถูกตัดทอน ดังนั้น หากคุณมี CSS ต่อไปนี้:

Div ( คุณสมบัติการเปลี่ยนแปลง: ความทึบ ซ้าย; ระยะเวลาการเปลี่ยนแปลง: 3s, 5s, 2s, 1s; )

สิ่งนี้ถูกตีความว่าเป็น:

Div ( คุณสมบัติการเปลี่ยนแปลง: ความทึบ ซ้าย; ระยะเวลาการเปลี่ยนแปลง: 3s, 5s; )

การใช้การเปลี่ยนภาพเมื่อเน้นเมนู

การใช้งาน CSS ทั่วไปคือการเน้นรายการในเมนูเมื่อผู้ใช้เลื่อนเคอร์เซอร์เมาส์ไปเหนือรายการเหล่านั้น ใช้การเปลี่ยนภาพได้ง่ายเพื่อทำให้เอฟเฟ็กต์ดูน่าสนใจยิ่งขึ้น

ก่อนที่เราจะดูข้อมูลโค้ด คุณอาจต้องการดูการสาธิตสด (สมมติว่าเบราว์เซอร์ของคุณรองรับการเปลี่ยนภาพ)

ขั้นแรก เราตั้งค่าเมนูโดยใช้ HTML:

จากนั้นเราสร้าง CSS เพื่อใช้รูปลักษณ์ของเมนูของเรา ส่วนที่เกี่ยวข้องแสดงไว้ที่นี่:

A ( color: #fff; สีพื้นหลัง: #333; การเปลี่ยนแปลง: การค่อยๆ คลาย 1 วินาที; ) a:hover, a:focus ( color: #333; สีพื้นหลัง: #fff; )

CSS นี้สร้างรูปลักษณ์ของเมนู โดยสีพื้นหลังและข้อความจะเปลี่ยนเมื่อองค์ประกอบอยู่ในสถานะ :hover และ :focus

ตัวอย่างจาวาสคริปต์

ควรใช้ความระมัดระวังเมื่อใช้การเปลี่ยนภาพทันทีหลังจาก:

• การเพิ่มองค์ประกอบให้กับ DOM โดยใช้ .appendChild()
• การลบการแสดงผลขององค์ประกอบ: ไม่มี; คุณสมบัติ

สิ่งนี้ได้รับการปฏิบัติราวกับว่าสถานะเริ่มต้นไม่เคยเกิดขึ้นและองค์ประกอบนั้นอยู่ในสถานะสุดท้ายเสมอ วิธีง่ายๆ ในการเอาชนะข้อจำกัดนี้คือการใช้ window.setTimeout() ไม่กี่มิลลิวินาทีก่อนที่จะเปลี่ยนคุณสมบัติ CSS ที่คุณต้องการเปลี่ยนไปใช้

การใช้การเปลี่ยนภาพเพื่อทำให้การทำงานของ JavaScript ราบรื่น

การเปลี่ยนผ่านเป็นเครื่องมือที่ดีเยี่ยมในการทำให้สิ่งต่างๆ ดูราบรื่นขึ้นมาก โดยไม่ต้องทำอะไรกับฟังก์ชัน JavaScript ของคุณ ยกตัวอย่างต่อไปนี้

คลิกที่ใดก็ได้เพื่อย้ายลูกบอล

การใช้ JavaScript คุณสามารถทำให้เอฟเฟกต์ของการเคลื่อนลูกบอลไปยังตำแหน่งใดตำแหน่งหนึ่งเกิดขึ้นได้:

Var f = document.getElementById("foo"); document.addEventListener("คลิก", ​​function(ev)( f.style.transform = "translateY("+(ev.clientY-25)+"px)"; f.style.transform += "translateX("+( ev.clientX-25)+"px)" ),เท็จ);

ด้วย CSS คุณสามารถทำให้มันราบรื่นโดยไม่ต้องใช้ความพยายามเป็นพิเศษ เพียงเพิ่มการเปลี่ยนแปลงให้กับองค์ประกอบ และการเปลี่ยนแปลงใดๆ จะเกิดขึ้นอย่างราบรื่น:

P ( padding-left: 60px; ) #foo ( รัศมีเส้นขอบ: 50px; ความกว้าง: 50px; ความสูง: 50px; พื้นหลัง: #c00; ตำแหน่ง: สัมบูรณ์; บน: 0; ซ้าย: 0; การเปลี่ยนแปลง: แปลง 1s; )

การตรวจจับการเริ่มต้นและการสิ้นสุดของการเปลี่ยนแปลง

elapsedTime ทศนิยมที่ระบุจำนวนวินาทีที่การเปลี่ยนแปลงดำเนินอยู่ในเวลาที่เหตุการณ์เริ่มทำงาน ค่านี้ไม่ได้รับผลกระทบจากค่าของ transition-delay

จำเป็นต้องใช้คุณสมบัติการเปลี่ยน CSS เพื่อตั้งค่าการเปลี่ยนภาพเคลื่อนไหวจากสถานะหนึ่งไปอีกสถานะหนึ่ง แอนิเมชันทำงานโดยใช้องค์ประกอบหลอก :hover และ :active เช่น เมื่อวัตถุเปลี่ยนจากสถานะหนึ่งไปอีกสถานะหนึ่ง

ไวยากรณ์การเปลี่ยนแปลง CSS ] || || || ;

การเปลี่ยนแปลง: [ไม่มี |

ไวยากรณ์ดูค่อนข้างน่ากลัว แต่จริงๆ แล้วทุกอย่างเรียบง่าย ลองดูตัวอย่างง่ายๆ ของวิธีการทำงานนี้ หลังจากสองตัวอย่าง แต่ละองค์ประกอบของไวยากรณ์จะถูกกล่าวถึง:

ตัวอย่างที่มีคุณสมบัติการเปลี่ยน

Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:

Код transition: all 1s linear означает следующее:

Чтобы все остальные объекты не смещались из-за увеличивающегося квадрата, можно использовать свойство свойство transform .

Пример #2. Увеличение объекта в html без смещения других объектов

На странице преобразуется в следующее

Теперь объект увеличивается и не происходит смещения других объектов.

Рассмотрим детально какие значения может принимать каждый из параметров

Значения свойств transition

1. Параметр transition-property

Свойство transition-property отвечает за части свойств объекта, к которым будет применена анимация. Может принимать следующие значения

• all - ко всему объекту (можно опустить, если задано время)
• color - к цвету текста
• background - к цвету фона объекта
• width , height - к изменению габаритов по ширине и высоте соответственно
• none - анимация отсутствует (по умолчанию стоит у каждого элемента)

Для включения нескольких свойств, их можно перечислить через запятую.

2. Параметр transition-duration

Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).

Например

Параметр transition-duration можно задавать отдельным свойством в CSS:

transition-duration : 1s ;

3. Параметр transition-timing-function

Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.

transition-timing-function : value ;

Где value может принимать значения:

• ease (значение по умолчанию) - замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
• linear - равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
• ease-in - замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out - замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out - замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
• step-start - мгновенный старт, равносильно параметру steps(1, start)
• step-end - мгновенное исполнение в конце, равносильно параметру steps(1, end)
• cubic-bezier(a1,b1,a2,b2) - задание собственного изменения скорости
• steps(a,b) - изменение рывками

Например

4. Параметр transition-delay

Задает время задержки до начала эффекта перехода. Измеряется в секундах (s) и милисекундах (ms)

Например

Пример #3. Разные задержки

Ранее мы уже говорили про возможность задавать разные задержки для трансформаций. Рассмотрим это на примере.

На странице преобразуется в следующее

Пример сложной трансформации с задержками

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS :

• -ms-transform-origin - для IE9 и старше (младше девятой версии трансформация не поддерживается
• -webkit-transform-origin - для Chrome, Safari, Android и iOS
• -o-transform-origin - для Opera до версии 12.10
• -moz-transform-origin - для Firefox до версии 16.0

Для обращения из JavaScript к свойству CSS transition используется следующая конструкция:

document.getElementById("elementID").style.transition

CSS свойство transition позволяет задать все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении.

Это свойство является короткой записью для следующих свойств (список соответствует порядку указания значений):

Поддержка браузерами

CSS синтаксис:

JavaScript синтаксис:

Object.style.transition = "width 3s ease-out 2s"

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

class = "test"> คุณสมบัติการเปลี่ยนใน CSS

ป้อนคำขอของคุณ

วันที่เพิ่ม: 16-10-2554 คุณสมบัติการเปลี่ยนแปลง

อ้างถึงคุณสมบัติ CSS3 ใหม่ มารู้จักเขากันดีกว่า คุณสมบัติเราทุกคนคุ้นเคยกับความจริงที่ว่าเมื่อคุณวางเมาส์ไว้ สีของลิงก์จะเปลี่ยนไป ในกรณีนี้สีจะเปลี่ยนไปอย่างกะทันหันโดยไม่มีการเปลี่ยนแปลงที่ราบรื่น คุณสมบัติ

จะช่วยให้คุณสามารถเพิ่มภาพเคลื่อนไหวขนาดเล็กเมื่อเปลี่ยนสีโดยไม่ต้องใช้ JavaScript ในข้อกำหนดที่จะคุณสมบัตินี้

มันบอกว่าต่อไปนี้:

การเปลี่ยน CSS ช่วยให้การเปลี่ยนแปลงคุณสมบัติในค่า CSS เกิดขึ้นได้อย่างราบรื่นตามระยะเวลาที่กำหนด

กล่าวอีกนัยหนึ่ง การเปลี่ยน CSS ช่วยให้คุณสามารถกำหนดการเปลี่ยนแปลงคุณสมบัติ CSS ได้อย่างราบรื่นและต่อเนื่อง คุณสมบัติสมัครคุณสมบัติ

สามารถนำไปใช้กับอะไรก็ได้ - พื้นหลัง สี ความยาว ขนาดตัวอักษร ฯลฯ โดยทั่วไปคุณสมบัติเหล่านี้เป็นคุณสมบัติที่ระบุสีหรือคุณสมบัติที่สามารถแสดงเป็นหน่วยความยาว (px, em, ex) หรือเปอร์เซ็นต์ นอกจากนี้เรายังสามารถใช้ pseudo-classes:focus และ:active เป็นเหตุการณ์ได้

เบราว์เซอร์ ฉันจะพูดทันทีเกี่ยวกับเบราว์เซอร์ -มาตรฐานใหม่ ยังไม่ได้รับการยอมรับดังนั้นในขณะนี้ ต้องใช้คำนำหน้า -webkit-, -moz- และ -o- นี่แสดงว่าคุณสมบัติได้รับการสนับสนุนเบราว์เซอร์ Chrome , ซาฟารี, โอเปร่า 10.5+, Firefox 4+ "รายการโปรด" ของเราอินเทอร์เน็ตเอ็กซ์พลอเรอร์

เช่นเคย เมื่อเลิกงาน ผู้ใช้ก็จะไม่เห็นภาพเคลื่อนไหวใดๆ เลย -เว็บคิท-ดังนั้นตัวอย่างทั้งหมดที่ให้ไว้นี้จะใช้ได้เฉพาะใน Chrome และ Safari เท่านั้น

ลองดูตัวอย่างง่ายๆ - เพิ่มการเปลี่ยนพื้นหลังลิงก์อย่างราบรื่น

ขั้นแรก เรามาจำวิธีเปลี่ยนสีของลิงก์เมื่อวางเมาส์ไว้เหนือลิงก์

ตอนนี้เรามาใช้คุณสมบัติ CSS คุณสมบัติเพื่อเปลี่ยนพื้นหลังของลิงค์ได้อย่างราบรื่น มาสร้างคลาสใหม่ที่จะเหมือนกับคลาสกันเถอะ เรียบง่ายและเพิ่มบรรทัดใหม่สองสามบรรทัด:

A.cool ( การขยาย: 5px 10px; พื้นหลัง: #69f; สี: #000; -webkit-transition-property: พื้นหลัง; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ง่าย; ) a.cool:hover ( พื้นหลัง: #33f; สี: #fff; )

มาสร้างลิงก์ทดสอบเพิ่มเติมสองสามลิงก์แล้วดูผลลัพธ์:

ตอนนี้พื้นหลังของเราเปลี่ยนสีได้อย่างราบรื่นภายในครึ่งวินาที! จากตัวอย่าง คุณจะเห็นว่าเราได้เพิ่มบรรทัดใหม่สามบรรทัดพร้อมคุณสมบัติ -webkit-transition-property, -webkit-transition-duration, -webkit-transition-timing-function.

จริงๆ แล้วสามารถรวมกันเป็นพร็อพเพอร์ตี้เดียวได้:

การเปลี่ยนผ่าน Webkit: พื้นหลัง 0.5 วินาทีง่าย;

คุณยังสามารถเพิ่มการเปลี่ยนสีข้อความได้อย่างราบรื่น:

A.cool2 ( ขยาย: 5px 10px; พื้นหลัง: #69f; สี: #000; -webkit-transition: พื้นหลัง 0.5 วินาทีง่าย, สี 1.0 วินาทีง่าย; ) a.cool2:hover ( พื้นหลัง: #33f; สี: #fff ; )

รหัสนี้เมื่อวางเมาส์จะเปลี่ยนสีพื้นหลังได้อย่างราบรื่นภายในครึ่งวินาทีและสีตัวอักษรภายใน 1 วินาที เราตรวจสอบ:

หากเราใช้พารามิเตอร์เดียวกันสำหรับแอนิเมชั่น เราก็สามารถใช้นิพจน์: -webkit-transition: all 0.5s Ease;

ตอนนี้เอฟเฟกต์การเปลี่ยนจะถูกนำไปใช้กับคุณสมบัติการเปลี่ยนแปลงทั้งหมดด้วยพารามิเตอร์เดียวกัน - 0.5 วินาที เอฟเฟกต์แบบง่าย

คุณยังสามารถเพิ่มการหน่วงเวลาให้กับเอฟเฟกต์ได้โดยใช้ การเปลี่ยนแปลงล่าช้า:

A.cool3 ( ขยาย: 5px 10px; พื้นหลัง: #69f; สี: #000; -webkit-transition: ทั้งหมด 0.5s ง่าย; -webkit-transition-delay: 0.5s; ) a.cool3:hover ( พื้นหลัง: #33f ; สี: #fff ;

ตอนนี้ภาพเคลื่อนไหวจะทำงานครึ่งวินาทีหลังจากวางเมาส์ไว้ มาตรวจสอบกันในกรณี:

ตารางการค้นหา

เพื่อให้เข้าใจเนื้อหาได้ดีขึ้น ฉันจึงขอนำเสนอตารางอ้างอิงขนาดเล็กให้คุณทราบ

การเปลี่ยนแปลงคุณสมบัติ คุณสมบัติที่เราใช้ภาพเคลื่อนไหว คุณสมบัติ CSS เกือบทั้งหมด: สี พื้นหลัง ความกว้าง ขนาดตัวอักษร ฯลฯ