The CSS animation property

By the way, this is part of a huge collection of notes and flashcards called CodingNotes. Check it out here https://www.codingnotes.io/ .

CodingNotes is also on Product Hunt today so consider giving it an upvote CodingNotes — Notes and flashcards for various programming languages (producthunt.com)

Photo by Fotis Fotopoulos on Unsplash

General

You can use the property for complex animations. By using the animation property, you also have way more options then when using the transition property.

Example

animation: left-to-right 1s ease-in 3s

• left-to-right: name, can be any
• 1s: how long it takes
• ease-in : how it behaves
• 3s: how long the delay is

💡 The animations get accessed with keyframes. They describe how the animation will be with values from 0 to 100% or with keywords of from and to.

@keyframes left-to-right {
    
}

Animation-fill-mode

💡 It defines the state of the animation before and after it finished.

Forwards, backwards, both

• forward: if the animation is done, it stays like this ( all properties are like in the 100% or to keyframe )
• backwards: if the animation is done, it goes back to original state ( all properties are like in the 0% or from keyframe)
• both: does both forwards and backwards

Example ( move in square)

@keyframes left-to-right {
    0% {
        transform:translateX(0);
    }
    33% {
        transform: translateY(100%);
    }
    66% {
         transform: translateX(100%) translateY(100%);
    }
    100% {
        transform: translateX(100%);
    }
}

Animation-iteration-count

💡 It states how often the animation gets executed ( default is 1)

animation: left-to-right 1s ease-in forwards 3;
animation-iteration-count: 3

→ infinite is also a possible value

Animation-direction

💡 It defines whether the animation should play forwards, backwards or in alternate cycles.

animation-direction: alternate

Not on hover

💡 If the animation should happen without an external action (like hovering), just put it into the appropriate base class.

.child {
   animation: left-to-right 1s ease-in forwards  infinite alternate 
}
.parent:hover .child {
    animation-play-state:paused;
}

→ the animation stops on hover

Hope you learned something !

By the way, this is part of a huge collection of notes and flashcards called CodingNotes. Check it out here https://www.codingnotes.io/ .

CodingNotes is also on Product Hunt today so consider giving it an upvote CodingNotes — Notes and flashcards for various programming languages (producthunt.com)