search
HomeWeb Front-endHTML Tutorial使用 CSS 3 transition 实现动画效果_html/css_WEB-ITnose

使用 CSS 3 transition 实现动画效果技术

maybe yes 发表于2015-05-12 23:52

使用 CSS3 的新特性 transition 可以很方便的实现像 JQuery 的 animate 方法一样的动画效果,但是有点遗憾的是,transition 只支持一个属性,重复定义后面的属性会覆盖前面的属性。

transition 有四个参数,分别是 transition-property(规定设置过渡效果的 CSS 属性的名称),transition-duration(规定完成过渡效果需要多少秒或毫秒),transition-timing-function(规定速度效果的速度曲线),transition-delay(开始过滤效果的延迟时间)

请看下面的例子,下面的例子中,红色的区域鼠标悬停后的动画效果是完全 CSS 实现的,鼠标悬停延迟一秒才开始运动,请使用鼠标悬停查看完整的粉红区域内的完整内容。

^_^,原来坚持一个把你当做空气的人,真的好难!这世上没有什么是做不到的,关键是坚持。就比如我,明知道喜欢的男生视我为空气,但我还是坚持每天给他发短信说早安、午安和晚安,就这么坚持了一个月,我终于把原本每个月都用不完的短信套餐用完了呢。

实现上面效果的重点 CSS3 代码如下:

<style>div#transition_animate_div{    height: 50px;    overflow: hidden;    background: pink;    line-height: 50px;    transition: height 2s ease-in-out 1s;    -moz-transition: height 2s ease-in-out 1s; /* Firefox 4 */    -webkit-transition: height 2s ease-in-out 1s; /* Safari and Chrome */    -o-transition: height 2s ease-in-out 1s; /* Opera */}div#transition_animate_div:hover{    height: 200px;}</style>

阅(264)评(0)查看评论


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
What is the purpose of the <datalist> element?What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element?What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

What is the purpose of the <meter> element?What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

What is the viewport meta tag? Why is it important for responsive design?What is the viewport meta tag? Why is it important for responsive design?Mar 20, 2025 pm 05:56 PM

The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

What is the purpose of the <iframe> tag? What are the security considerations when using it?What is the purpose of the <iframe> tag? What are the security considerations when using it?Mar 20, 2025 pm 06:05 PM

The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

How do I use the HTML5 <time> element to represent dates and times semantically?How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What are the best practices for cross-browser compatibility in HTML5?What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How do I use HTML5 form validation attributes to validate user input?How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools