CSS3 attributes transition, animation, transform
This time I will bring you the properties of CSS3transition, animation, and transform. What are the precautions for using the CSS3 properties transition, animation, and transform? The following is a practical case. Get up and take a look.
Recently, in response to the company's needs, I need to use css3 to make animation. I finally understand the three attributes that I had been confused about before.
Simply make a simple comparison here to deepen your memory.
Browser Compatibility
##CSS3 transform property
Internet Explorer 10, Firefox, and Opera support the transform attribute. Internet Explorer 9 supports an alternative -ms-transform property (for 2D transforms only). Safari and Chrome support alternative -webkit-transform properties (3D and 2D transforms). Opera only supports 2D conversion.transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */
CSS3 animation property ##Internet Explorer 10, Firefox and Opera Support animation attribute.
Safari and Chrome support an alternative -webkit-animation attribute.
Note: Internet Explorer 9 and earlier versions do not support the animation property.
Usage:
animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
##CSS3 transition propertyInternet Explorer 10, Firefox, Opera, and Chrome support the transition attribute.
Safari supports an alternative -webkit-transition attribute. Note: Internet Explorer 9 and earlier browsers do not support the transition attribute.Usage:
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s;
Other comparisons
Transition and animation belong to animation properties , transform belongs to the static
attribute. According to the understanding of English words: conversion, transformation, transform mainly refers to the conversion of displacement, size, position, and shape. If you directly write the attribute transformation, you will get the transformed shape and position. Transition and animation are both animation properties, so they have the following property
duration
timing-function
delay
properties, animation time, animation form, and delay time For animation, the property becomes the name of the animation. The unique properties of animation are:
animation-
direction
One to define the number of times the animation is played , one is to define whether the animation is played in reverse in turn
Abbreviated form comparison:
Transition attribute: transition, that is, the transition of the css change process, so define the transition attribute The meaning is that when the transition attribute is defined and changes, it will be transformed according to the animation of this transition, rather than a rigid direct transformation, which provides a good way for animation. Generally we write:-webkit-transition:all 0.85s ease-in 0.1s;
-o-transition:all 0.85s ease-in 0.1s;-moz-transition:all 0.85s ease -in 0.1s;
transition:all 0.85s ease-in 0.1s;
all means that all changes in attributes will be changed according to this transition
animation writing method:
-webkit-animation: tang1 0.5s ease 0s infinite alternate;
animation: tang1 0.5s ease 0s infinite alternate;
Abbreviated form, animation is followed by the number of animations and whether to play in reverse in turn
The one starting with animation is the name of the animation , so here we need to first define how the animation transforms:
@keyframes tang1
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes tang1 /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}Due to browser compatibility, this must also be written when defining the animation here.
from represents 0% time, to represents 100% time.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to make a 0.5 pixel line in css
css3 Transition smooth transition menu bar implementation
The above is the detailed content of CSS3 attributes transition, animation, transform. 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
How to speed up animation effects in Windows 11: 2 methods explained
Apr 24, 2023 pm 04:55 PM
When Microsoft launched Windows 11, it brought a lot of changes. One of the changes is an increase in the number of user interface animations. Some users want to change the way things appear, and they have to find a way to do it. Having animations makes it feel better and more user-friendly. Animation uses visual effects to make the computer look more attractive and responsive. Some of them include sliding menus after a few seconds or minutes. There are many animations on your computer that can affect PC performance, slow it down, and interfere with your work. In this case you have to turn off animation. This article will introduce several ways that users can improve the speed of their animations on PC. You can apply the changes using Registry Editor or a custom file you run. How to improve animations in Windows 11
CSS tip: Use transition to retain hover state
Sep 27, 2022 pm 02:01 PM
How to preserve hover state? The following article will introduce to you how to retain the hover state without using JavaScript. I hope it will be helpful to you!
How to use CSS to achieve the rotating background animation effect of elements
Nov 21, 2023 am 09:05 AM
How to use CSS to implement rotating background image animation effects of elements. Background image animation effects can increase the visual appeal and user experience of web pages. This article will introduce how to use CSS to achieve the rotating background animation effect of elements, and provide specific code examples. First, we need to prepare a background image, which can be any picture you like, such as a picture of the sun or an electric fan. Save the image and name it "bg.png". Next, create an HTML file and add a div element in the file, setting it to
How to compress and format images in Vue?
Aug 25, 2023 pm 11:06 PM
How to compress and format images in Vue? In front-end development, we often encounter the need to compress and format images. Especially in mobile development, in order to improve page loading speed and save user traffic, it is critical to compress and format images. In the Vue framework, we can use some tool libraries to compress and format images. Compression using the compressor.js library compressor.js is a JavaS for compressing images
Interpretation of CSS 3D view properties: transform and perspective
Oct 24, 2023 am 08:11 AM
Interpretation of CSS3D view properties: transform and perspective, specific code examples are required Introduction: In modern web design, 3D effects have become a very popular element. Through the transform and perspective properties of CSS, we can easily add 3D visual effects to web pages to make them more vivid and attractive. This article will explain these two properties and provide specific code examples. 1. transform attribute: transf
CSS gradient animation properties: transition and background-image
Oct 27, 2023 pm 01:18 PM
CSS gradient animation properties: transition and background-image In web design, animation effects can add vitality and appeal to the page. CSS provides many properties for creating animation effects, including the gradient animation properties transition and background-image. This article will introduce these two properties in detail and give specific code examples. transition attribute The transition attribute is used to implement elements in a
How to implement image animation and gradient effects in Vue?
Aug 18, 2023 pm 06:00 PM
How to implement image animation and gradient effects in Vue? Vue is a progressive framework for building user interfaces that makes it easy to implement animations and gradient effects. In this article, we will introduce how to use Vue to implement image animation and gradient effects, and provide some code examples. 1. Use Vue’s transition effects to implement image animation. Vue provides built-in instructions for transition effects, making it easy to add animation effects to HTML elements. When using transition effects, you can wrap picture elements and add transition instructions on the elements. Example
Transition function in Vue3: implement animated transition of components
Jun 18, 2023 pm 04:20 PM
Transition function in Vue3: Implementing animated transitions of components Vue3 is one of the most popular JavaScript frameworks currently. It provides comprehensive tools to solve the construction problems of front-end applications. Among them, the transition function is one of the very powerful and useful functions, which can help us realize the animated transition of components. In this article, we will introduce the transition function in detail and explain how to use it in Vue3 applications. transition
