This article mainly introduces css3 animation to achieve rotation effects.
css is a cascading style sheet, and friends who are learning front-end must be very familiar with it. Well, everyone should know that a cool animation effect can make your website look more sophisticated and enrich the content to attract users.
Now we will introduce to you a simple and interesting animation special effect, which is to achieve the picture rotation effect.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css3实现旋转移动动画特效</title>
<head>
<style>
.main{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
border-radius: 20px;
background: red;
position: relative;
top: 30px;
animation: asd 5s;
}
@keyframes asd {
0 %{transform: rotate(0deg);}
25%{transform: rotate(60deg);left: 0px;}
50%{left:500px;}
75%{transform: rotate(-520deg);}
100%{transform: rotate(0deg);left: 0px;}
}
</style>
</head>
<body>
<div class="main">
动画
</div>
</body>
</html>The effect is as shown below:
##Introduction to relevant important attributes in css3:
transform:
@keyframes:
With @keyframes rules you can create animations. In other words, @keyframes here are only used to define animations and have no actual meaning. The implementation principle of css animation is to gradually transform from one css style to another css style. The time when the change occurs is specified in percentage (or "from" and "to"). (0% is the start time of animation, 100% is the end time of animation.) As long as you master the principles of CSS animation, it is very easy to achieve most cool effects through pure CSS. This article is about the specific method of realizing rotation and movement effects in CSS3 animation. It is simple and easy to understand. I hope it will be helpful to friends in need!javascript special effects collection
If you want to know more about the front-end, you can follow PHP Chinese websiteCSS3 video tutorial, CSS video tutorial, Bootstrap tutorial and other related tutorials, welcome everyone to refer to and learn!
The above is the detailed content of How to implement rotation and movement animation effects in CSS3. 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
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
Dreamweaver Mac version
Visual web development 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.
WebStorm Mac version
Useful JavaScript development tools
Zend Studio 13.0.1
Powerful PHP integrated development environment
