Use css3 to animate web page elements through styles
Using css3 can animate web elements through styles without using javascript and flash, making the website more cool.
css3 transition
##The excessive animation (trainsition) attribute can be used to style the element The browsers supported by training include ie10, firefox, chrome and opera.
Let’s first look at several properties of trainsition:
trainsition-property: Specifies the css attribute name of the application transition.
trainsition-duration: Specifies excessive time spent.
trainsiton-timing-function: Specifies the transition time curve.
trainsition-delay: Specifies when the transition begins.
## Let’s look at a simple transition example first, write p{
width:100px;
height:100px;
background:red;
trainsition:width 3s,height 2s;//在这里为了方便，将过渡属性简写了，我们可以将过渡属性简写为trainsition:加上上面四个属性，可以把默认属性省略。
}
p:hover
{
width:300px;
height:200px;
}
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="demo.css"/> </head> <body> <p></p> </body> </html>
Note: If the transition time is not set, it will be 0 by default. There is just no transition effect.
The method we more often use is to add styles through js to practice various animation transitions, as follows:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<style>
p{
background:red;
width:200px;
height:200px;
transition:width 2s,height 2s;
}
p.over{
width:300px;
height:300px;
}
</style>
</head>
<body>
<p
</p>
<script>
$('p').hover(function(){
$('p').addClass('over');},
function(){
$('p').removeClass('over');
});
</script>
</body>
</html>But although the change in style is implemented above, we can see that the change is from an initial state to a final state, and the limitations are very large, so we I hope there will be an intermediate state of transformation. At this time, keyframe animation (@keyframes) will be used:
The basic format is:@keyframes Name {
Time point {element status}
....
｝
For example, we can use
@frames chgground{
from{ backgroud:red;}
to{backgroud:yellow;}
}p{
animation:chgbackground 3s;
}p Then we have the animation of chgbackground. We can also use percentages to specify the status of key frames. From to is 0% and %. 100. The following code
@frames chgbackground{
0%{background:yellow;}
50%{background:red;}
100%{background:black;}
}
< ;script>$('p').addClass('shake');You can easily add element shaking effects.
The above is the detailed content of Use css3 to animate web page elements through styles. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1387
52
How to achieve wave effect with pure CSS3? (code example)
Jun 28, 2022 pm 01:39 PM
How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!
Use CSS skillfully to realize various strange-shaped buttons (with code)
Jul 19, 2022 am 11:28 AM
This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!
How to hide elements in css without taking up space
Jun 01, 2022 pm 07:15 PM
Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.
Vue page transition animation implementation and common animation effects
Jun 09, 2023 pm 04:11 PM
Vue is a popular JavaScript framework that uses a data-driven approach to assist developers in building single-page web applications with strong interactivity and beautiful data presentation. Vue has many useful features built-in, one of which is page transition animation. In this article, we will introduce how to use Vue’s transition animation function and discuss the most common animation effects. Implementing Vue page transition animation Vue's page transition animation is through Vue's <transition> and <tr
How to implement lace borders in css3
Sep 16, 2022 pm 07:11 PM
In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".
Detailed explanation of JavaScript obtaining web page elements
Apr 09, 2024 pm 12:45 PM
Answer: JavaScript provides a variety of methods for obtaining web page elements, including using ids, tag names, class names, and CSS selectors. Detailed description: getElementById(id): Get elements based on unique id. getElementsByTagName(tag): Gets the element group with the specified tag name. getElementsByClassName(class): Gets the element group with the specified class name. querySelector(selector): Use CSS selector to get the first matching element. querySelectorAll(selector): Get all matches using CSS selector
Use uniapp to achieve page transition animation effects
Nov 21, 2023 pm 02:38 PM
With the rapid development of mobile Internet, more and more programmers are beginning to use uniapp to build cross-platform applications. In mobile application development, page transition animation plays a very important role in upgrading user experience. Through page transition animation, it can effectively enhance the user experience and improve user retention and satisfaction. Therefore, let’s share how to use uniapp to achieve page transition animation effects and provide specific code examples. 1. Introduction to uniapp Uniapp is a base product launched by the DCloud development team.
Methods and techniques on how to achieve floating animation effects through pure CSS
Oct 25, 2023 am 08:10 AM
Methods and techniques on how to achieve floating animation effects through pure CSS. In modern web design, animation effects have become one of the important elements that attract users’ attention. One of the common animation effects is the floating effect, which can add a sense of movement and vitality to the web page, making the user experience richer and more interesting. This article will introduce how to achieve floating animation effect through pure CSS, and provide some code examples for reference. 1. Use the transition attribute of CSS to achieve the floating effect. The transition attribute of CSS can
