css 纯CSS动画

Posted 2021-05-13

/* The animation code using FROM TO */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The animation code using PERCENTAGES */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* Changing both the background-color and the position of the <div> */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}



/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative; /* if changing position */
    background-color: red;
    animation-name: example;
    animation-duration: 4s; /* how long time an animation should take to complete */
    animation-delay: 2s; /* delay before the start of an animation */
    animation-iteration-count: 3; /* number of times an animation should run - "infinite" allowed */
}

/* can be expressed in shorthand */
div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

div {
    animation: example 5s linear 2s infinite alternate;
}


div { animation-direction: reverse; }
/* The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.

The animation-direction property can have the following values:
normal - The animation is played as normal (forwards). This is default
reverse - The animation is played in reverse direction (backwards)
alternate - The animation is played forwards first, then backwards
alternate-reverse - The animation is played backwards first, then forwards */

div { animation-timing-function: linear; }
/* The animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:
ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
linear - Specifies an animation with the same speed from start to end
ease-in - Specifies an animation with a slow start
ease-out - Specifies an animation with a slow end
ease-in-out - Specifies an animation with a slow start and end
cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function */


/*  smooth delayed fade in */

#element{
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

#element {
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    animation: 3s ease 0s normal forwards 1 fadein;
}


/*  smooth delayed fade in with bounce */ 
@keyframes fadein{
  0% {transform: scale(0); opacity: 0; }
  60% {transform: scale(0.9); opacity: 0; }
  70% {transform: scale(1.1); opacity: 1; }
  80% {transform: scale(0.9); opacity: 1; }
  90% {transform: scale(1.1); opacity: 1; }
  100% {transform: scale(1); opacity: 1; }
}
 
@-webkit-keyframes fadein{
  0% {transform: scale(0); opacity: 0; }
  60% {transform: scale(0.9); opacity: 0; }
  70% {transform: scale(1.1); opacity: 1; }
  80% {transform: scale(0.9); opacity: 1; }
  90% {transform: scale(1.1); opacity: 1; }
  100% {transform: scale(1); opacity: 1; }
}