css3 animation uses "@keyframes" to customize rules. "@keyframes" can specify animation rules and define the behavior of a period of CSS animation. The syntax is "@keyframes animation name {keyframes-selector {css-styles;}}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
@keyframes is a rule of CSS3 that can be used to define the behavior of a period of CSS animation and create simple animations.
@keyframes rules are composed of a set of encapsulated CSS style rules that describe how attribute values change over time.
@keyframes animation-name {keyframes-selector {css-styles;}}keyframes-selector: Defines the percentage of animation, it is between 0% and 100%. An animation can contain many selectors.
Then, using different CSS animation properties, you can control many different aspects of the animation, including the number of animation iterations, whether to alternate between the start and end values, and the animation Whether it should run or pause. Animations can also delay their start time.
@keyframe rules consist of the keyword "@keyframe", followed by an identifier giving the name of the animation (which will be referenced using animation-name), followed by a set of style rules (delimited by curly braces) . The animation is then applied to the element by using the identifier as the value of the animation-name attribute.
Syntax:
/* 定义动画*/
@keyframes 动画名称{
/* 样式规则*/
}
/* 将它应用于元素 */
.element {
animation-name: 动画名称（在@keyframes中已经声明好的）;
/* 或使用动画简写属性*/
animation: 动画名称 1s ...
}Inside the curly braces, we need to define keyframes or waypoints that specify the value of the property being animated at a specific point during the animation . This allows us to control intermediate steps in the animation sequence.
For example, a simple animated @keyframe can look like this:
@keyframes change-bg-color {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100%{
background-color: red;
}
}
.demo{
-webkit-animation:change-bg-color 5s infinite;
animation: change-bg-color 5s infinite;
}
@keyframes change-bg-color {
from{
background-color: red;
}
50% {
background-color: blue;
}
to{
background-color: red;
}
}The keyframe selector consists of one or more comma-separated percentage values or the from and to keywords. Note that the percent unit specifier must be used for percent values. Therefore, '0' is an invalid keyframe selector. The following is an example of an animation with a keyframe selector that includes multiple comma-separated percentage values and/or the keyword keyframe selectors from and to. @keyframes bouncing {
0%, 50%, 100% { /* 或者 from, 50%, to */
top: 0;
}
25%, 75% {
top: 100px;
}
}The @keyframes rule definition above: The element's top offset will be equal to zero at the beginning, halfway through, and at the end of the animation, and it will be equal to zero at one-quarter and three-quarters of the way. 100px; This means that the element moves up and down several times during the animation loop.
css @keyframes Specify animation rule example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
/* Safari and Chrome */
}
@keyframes mymove {
0% {
top: 0px;
left: 0px;
background: red;
}
25% {
top: 0px;
left: 100px;
background: blue;
}
50% {
top: 100px;
left: 100px;
background: yellow;
}
75% {
top: 100px;
left: 0px;
background: green;
}
100% {
top: 0px;
left: 0px;
background: red;
}
}
@-webkit-keyframes mymove
/* Safari and Chrome */
{
0% {
top: 0px;
left: 0px;
background: red;
}
25% {
top: 0px;
left: 100px;
background: blue;
}
50% {
top: 100px;
left: 100px;
background: yellow;
}
75% {
top: 100px;
left: 0px;
background: green;
}
100% {
top: 0px;
left: 0px;
background: red;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css video tutorial )
The above is the detailed content of What custom rules are used for css3 animation?. For more information, please follow other related articles on the PHP Chinese website!
Let Mavo Shine in Building Interactive Web ApplicationsApr 18, 2025 am 09:50 AMAs you could guess from the title, this tutorial is dedicated to Mavo: a new, approachable way to create complex, reactive, persistent web applications just
ConvictionApr 18, 2025 am 09:49 AMDavid DeSandro has loads of super cool JavaScript libraries he's created over the years. His latest is Zdog, a "round, flat, designer-friendly pseudo-3D
SscecceApr 18, 2025 am 09:47 AMYou know what a "reduced test case" is, right? We've talked about it here. I imagine the concept is useful in many walks of life, but in the world of
Run useEffect Only OnceApr 18, 2025 am 09:46 AMReact has a built-in hook called useEffect. Hooks are used in function components. The Class component comparison to useEffect are the methods
Bringing CSS Grid to WordPress LayoutsApr 18, 2025 am 09:45 AMDecember 6th, 2018 was a special date for WordPress: it marked the release of version 5.0 of the software that, to this day, powers more than one-third of the
Moving Text on a Curved PathApr 18, 2025 am 09:44 AMThere was a fun article in The New York Times the other day describing the fancy way Elizabeth Warren and her staff let people take a selfie with Warren.
Weekly news: Truncating muti-line text, calc() in custom property values, Contextual AlternatesApr 18, 2025 am 09:43 AMIn this week's roundup, WebKit's method for truncating multi-line text gets some love, a note on calculations using custom properties, and a new OpenType feature that prevents typographic logjams.
My Favorite Netlify FeaturesApr 18, 2025 am 09:42 AM? Hey folks! Silvestar pitched this post to us because he is genuinely enthusiastic about JAMstack and all of the opportunities it opens up for
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
Zend Studio 13.0.1
Powerful PHP integrated development environment
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.
Dreamweaver CS6
Visual web development tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
