HTML CSS SQL Meta tag Generator ScrollBar design Generator Encode Decode images

CSS Basics

Introduction Syntax Selectors Attribute Selectors Specificity Combinators !important Comments Colors

CSS Need to Know

Box Model Pseudo-class Pseudo-element Inline-block Math Functions Max and Min Opacity Outline Overflow Z-index Float

Most used

Align Backgrounds Borders Text Units Padding Margins Position Tables Display Fonts Lists Height and Width

CSS Reference

CSS Properties reference CSS Pseudo-Classes reference CSS Pseudo-Elements reference CSS Selector reference

CSS animation

In CSS, animations are used to animate elements in a more dynamic way. You can create animations using keyframes to define the style changes that occur throughout the animation.

Here's a simple example of how CSS animation works:

@keyframes move {
            0% { transform: translateY(0); }
            50% { transform: translateY(100px); }
            100% { transform: translateY(0); }
          }
          
          .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: move 2s infinite;
          }
  
Result:

In this example, we define a keyframe animation called move that moves an element up and down using the transform property. The animation lasts for 2 seconds and repeats infinitely.

You can customize the keyframes to create different types of animations like fading, rotating, scaling, and more. Play around with different values to see how you can create interesting animations on your website.

.dead {
   bottom: -6912px;
}