The Web Dev Guide by Wishtack
  • The Web Dev Guide by Wishtack
  • HTML
    • HTML Tags
    • HTML Attributes
    • Content Formatting
    • Empty Tags vs Content Tags
    • Some Links
  • ECMAScript
    • Some History
    • Language Properties
    • Single-Threaded thus Asynchronous
    • The Event Loop
    • Classes
    • Hoisting is Dead: var vs. let vs. const
    • this & "binding"
    • Arrow Functions
    • Template Strings
    • Syntactic Sugar
      • Spread
      • Destructuring
      • Rest
      • Object Literal Property Value Shorthand
    • Named Parameters
    • Compatibility
  • Tools
    • Node.js
    • NPM
    • Yarn
    • Webpack
    • WebStorm
    • StackBlitz
  • DOM
    • What Is It?
    • Element Selection
    • Element Modification
    • Events
  • Forms
    • The <form> tag
    • Form elements
    • Form validation
  • Networking
    • Fetch Web API
  • CSS
    • Selectors
    • Transforms
    • Transitions
    • Animations
    • Web Animations API
    • Sass
  • Responsive Web Design
    • Viewport
    • Media Queries
    • Grid Layout
    • Flex Layout
    • Frameworks & Libraries
  • Web APIs
  • Testing
    • Unit Testing
    • End to End Testing
  • Security
    • Injection
    • DOM XSS
    • Insecure Direct Object Reference
    • Cross-Site Request Forgery
    • Client vs API Validation
    • API Unauthorized Access and Data Leak
  • More Links
Powered by GitBook
On this page
  1. CSS

Animations

CSS animations describe a chain of transition steps.

Each step is called a keyframe.

@keyframes demo-animation {

    0% {
        background-color: #ffffff;
        color: #000000;
        width: 73px;
    }

    33% {
        background-color: rgb(63,81,181);
        color: #ffffff;
        width: 73px;
    }

    66% {
        background-color: rgb(63,81,181);
        color: #ffffff;
        width: 173px;
    }

    100% {
        background-color: #ffffff;
        color: #000000;
        width: 173px;
    }

}

.wt-demo-animation {
  
    border-style: solid;
    border-width: 1px;
    text-align: center;
    width: 73px;
    margin: auto;
    padding: 10px;
  
}

.wt-demo-animation:hover {

    animation-name: demo-animation;
    animation-direction: alternate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

Animate.css

The animate.css module implements lots of interesting animations.

PreviousTransitionsNextWeb Animations API

Last updated 6 years ago

https://codepen.io/younes-jaaidi/pen/eLVybG
https://daneden.github.io/animate.css/
Animate.css | A cross-browser library of CSS animations.
Logo