What are the related properties of CSS3 animation?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What are the related properties of CSS3 animation?

青灯夜游

Jan 12, 2022 pm 05:27 PM

css3animationAttributes

Animation-related attributes include: transform, transform-origin, transition, "@keyframes", animation, animation-name, animation-duration, animation-delay, etc.

What are the related properties of CSS3 animation?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css3 has three types of animation: transform, transition, animation

1, transform (2D/3D conversion attribute)

Properties	Description	CSS
transform	Elements suitable for 2D or 3D transformation	3
transform-origin	Allows you to change the transform element position	3
transform-style	Specify how to nest elements in 3D space	3
perspective	Specify how the 3D element is viewed in perspective	3
perspective-origin	Specify the bottom position of the 3D element	3
backface-visibility	Defines whether an element should be visible when not facing the screen	3

2. transition (transition attribute)

Attribute	Description	CSS
transition	This property is the abbreviation of transition-property, transition-duration, transition-timing-function, transition-delay form.	3
transition-property	Set the CSS property used for transition.	3
transition-duration	Set the length of time for transition.	3
transition-timing-function	Set the timing function for transition.	3
transition-delay	Specify the time when the transition starts.	3

3. animation (animation attribute)

##animation-iteration-countRetrieve or set the loop of object animation Times3animation-directionRetrieve or set whether the object animation moves in reverse direction in the loop3animation-play-stateRetrieve or set the state of the object animation3

Attribute	Description	CSS
@keyframes	Define an animation, the animation defined by @keyframes The name is used by animation-name.	3
animation	Composite attribute. Retrieves or sets the animation effects applied to the object.	3
animation-name	Retrieve or set the animation name applied to the object, which must be used in conjunction with the rule @keyframes, because the animation name is determined by @keyframes definition	3
animation-duration	Retrieves or sets the duration of the object animation	3
animation-timing-function	Retrieves or sets the transition type of the object animation	3
animation-delay	Retrieve or set the delay time of object animation	3

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 50px;
				height: 50px;
				background: red;
				margin: 100px;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					width: 150px;
					height: 150px;
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					width: 100px;
					height: 100px;
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

What are the related properties of CSS3 animation?

(Learning video sharing:

css video tutorial)

The above is the detailed content of What are the related properties of CSS3 animation?. For more information, please follow other related articles on the PHP Chinese website!

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

CSS: Is it bad to use ID selector?May 13, 2025 am 12:14 AM

Using 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 AM

HTML5'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 AM

HTML5aimedtoimprovewebdevelopmentinfourkeyareas:1)Multimediasupport,2)Semanticstructure,3)Formcapabilities,and4)Offlineandstorageoptions.1)HTML5introducedandelements,simplifyingmediaembeddingandenhancinguserexperience.2)Newsemanticelementslikeandimpr

CSS ID and Class: common mistakesMay 13, 2025 am 12:11 AM

IDsshouldbeusedforJavaScripthooks,whileclassesarebetterforstyling.1)Useclassesforstylingtoallowforeasierreuseandavoidspecificityissues.2)UseIDsforJavaScripthookstouniquelyidentifyelements.3)Avoiddeepnestingtokeepselectorssimpleandimproveperformance.4

What is thedifference between class and id selector?May 12, 2025 am 12:13 AM

Classselectorsareversatileandreusable,whileidselectorsareuniqueandspecific.1)Useclassselectors(denotedby.)forstylingmultipleelementswithsharedcharacteristics.2)Useidselectors(denotedby#)forstylinguniqueelementsonapage.Classselectorsoffermoreflexibili

CSS IDs vs Classes: The real differencesMay 12, 2025 am 12:10 AM

IDsareuniqueidentifiersforsingleelements,whileclassesstylemultipleelements.1)UseIDsforuniqueelementsandJavaScripthooks.2)Useclassesforreusable,flexiblestylingacrossmultipleelements.

CSS: What if I use just classes?May 12, 2025 am 12:09 AM

Using a class-only selector can improve code reusability and maintainability, but requires managing class names and priorities. 1. Improve reusability and flexibility, 2. Combining multiple classes to create complex styles, 3. It may lead to lengthy class names and priorities, 4. The performance impact is small, 5. Follow best practices such as concise naming and usage conventions.

ID and Class Selectors in CSS: A Beginner's GuideMay 12, 2025 am 12:06 AM

ID and class selectors are used in CSS for unique and multi-element style settings respectively. 1. The ID selector (#) is suitable for a single element, such as a specific navigation menu. 2.Class selector (.) is used for multiple elements, such as unified button style. IDs should be used with caution, avoid excessive specificity, and prioritize class for improved style reusability and flexibility.

See all articles