Achieve CSS3 animation effects: 1. Use the "@keyframes" rule with the animation attribute to achieve animation effects; 2. Use the transition attribute to achieve animation effects. The syntax is "element {transition: attribute name time speed curve delay} ".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
What to use to achieve css3 animation effect
1. What is
CSS animation (CSS Animations) is recommended for cascading style sheets to allow scalability Markup language (XML) elements use CSS animation modules
refers to the process of elements gradually transitioning from one style to another
There are many common animation effects, such as translation, Rotation, scaling, etc., complex animation is a combination of multiple simple animations
CSS ways to implement animation include the following:
transition to implement gradient animation
animation Implement custom animation
2. Implementation method
transition Implement gradient animation
The properties of transition are as follows:
property: fill in the css properties that need to be changed
duration: the time unit (s or ms) required to complete the transition effect
timing-function: the speed curve of the completed effect
delay: the delay trigger time of the animation effect
where timing-function The values are as follows:
Value Description
linear Uniform speed (equal to cubic-bezier(0,0,1,1))
ease from slow to fast to slow again (cubic-bezier(0.25,0.1,0.25,1))
ease-in slowly becomes faster (equal to cubic-bezier (0.42,0,1,1))
- ##ease-out slowly slows down (equal to cubic-bezier(0,0,0.58,1))
- ease-in-out first becomes faster and then slower (equal to cubic-bezier(0.42,0,0.58,1)), fade-in effect
- cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function. Possible values are numeric values between 0 and 1
For example, realize the animation effect of changing when the mouse moves up
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>Output result:
animation to realize custom animation
animation is the abbreviation of 8 attributes, which are as follows:- animation-duration specifies the time required for the animation to complete a cycle, in seconds (s) or milliseconds (ms), the default is 0
- animation-timing-function specifies the animation timing function, that is, the speed curve of the animation, the default is "ease" linear, ease, ease-in, ease- out, ease-in-out
- animation-delay specifies the animation delay time, that is, when the animation starts, the default is 0
- animation- iteration-count specifies the number of animation playback times, the default is 1
- animation-direction specifies the direction of animation playback, the default is normal normal, reverse, alternate, alternate-reverse
- animation-fill-mode Specifies animation fill mode. The default is none forwards, backwards, both
- animation-play-state specifies the animation playback state, running or paused. The default is running running, pauser
- animation-name specifies the name of @keyframes animation
define key frames through @keyframes
Therefore, if we want to rotate the element in a circle , you only need to define the start and end frames:@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}from represents the first frame, to represents the frame at the endYou can also use percentages to describe the life cycle@keyframes rotate{
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}After defining the keyframe, you can use it directly: animation: rotate 2s;
3. Summary
transition (transition) is used to set The overstyle of elements has a similar effect to animation, but the details are very different. transform (transform) is used to rotate, scale, move or tilt elements, and has nothing to do with the animation of setting styles. Relationship, just like color, is used to set the "appearance" of an element. translate (movement) is just an attribute value of transform, that is, movement. animation (animation) is used to set animation properties. It is an abbreviated attribute, including 6 attributes(Learning video sharing:css video tutorial)
The above is the detailed content of What to use to achieve css3 animation effect. For more information, please follow other related articles on the PHP Chinese website!
CSS: Can I use multiple IDs in the same DOM?May 14, 2025 am 12:20 AMNo,youshouldn'tusemultipleIDsinthesameDOM.1)IDsmustbeuniqueperHTMLspecification,andusingduplicatescancauseinconsistentbrowserbehavior.2)Useclassesforstylingmultipleelements,attributeselectorsfortargetingbyattributes,anddescendantselectorsforstructure
The Aims of HTML5: Creating a More Powerful and Accessible WebMay 14, 2025 am 12:18 AMHTML5aimstoenhancewebcapabilities,makingitmoredynamic,interactive,andaccessible.1)Itsupportsmultimediaelementslikeand,eliminatingtheneedforplugins.2)Semanticelementsimproveaccessibilityandcodereadability.3)Featureslikeenablepowerful,responsivewebappl
Significant Goals of HTML5: Enhancing Web Development and User ExperienceMay 14, 2025 am 12:18 AMHTML5aimstoenhancewebdevelopmentanduserexperiencethroughsemanticstructure,multimediaintegration,andperformanceimprovements.1)Semanticelementslike,,,andimprovereadabilityandaccessibility.2)andtagsallowseamlessmultimediaembeddingwithoutplugins.3)Featur
HTML5: Is it secure?May 14, 2025 am 12:15 AMHTML5isnotinherentlyinsecure,butitsfeaturescanleadtosecurityrisksifmisusedorimproperlyimplemented.1)Usethesandboxattributeiniframestocontrolembeddedcontentandpreventvulnerabilitieslikeclickjacking.2)AvoidstoringsensitivedatainWebStorageduetoitsaccess
HTML5 goals in comparison with older HTML versionsMay 14, 2025 am 12:14 AMHTML5aimedtoenhancewebdevelopmentbyintroducingsemanticelements,nativemultimediasupport,improvedformelements,andofflinecapabilities,contrastingwiththelimitationsofHTML4andXHTML.1)Itintroducedsemantictagslike,,,improvingstructureandSEO.2)Nativeaudioand
CSS: Is it bad to use ID selector?May 13, 2025 am 12:14 AMUsing ID selectors is not inherently bad in CSS, but should be used with caution. 1) ID selector is suitable for unique elements or JavaScript hooks. 2) For general styles, class selectors should be used as they are more flexible and maintainable. By balancing the use of ID and class, a more robust and efficient CSS architecture can be implemented.
HTML5: Goals in 2024May 13, 2025 am 12:13 AMHTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur
What are the main areas where HTML5 tried to improve?May 13, 2025 am 12:12 AMHTML5aimedtoimprovewebdevelopmentinfourkeyareas:1)Multimediasupport,2)Semanticstructure,3)Formcapabilities,and4)Offlineandstorageoptions.1)HTML5introducedandelements,simplifyingmediaembeddingandenhancinguserexperience.2)Newsemanticelementslikeandimpr
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
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.
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 Chinese version
Chinese version, very easy to use
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
Atom editor mac version download
The most popular open source editor
