https://github.com/hirwa13/css-animation

https://github.com/hirwa13/css-animation

Last synced: 17 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/hirwa13/css-animation
• Owner: HIRWA13
• Created: 2023-08-24T16:00:44.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-31T11:19:32.000Z (over 1 year ago)
• Last Synced: 2023-09-09T01:59:26.847Z (over 1 year ago)
• Language: CSS
• Size: 12.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS Animation.

in this repository includes some of the lessons and the codes regarding CSS animation and how to use them.

## What is CSS Animation?

CSS animation is a method of animating certain HTML elements without having to use javascript or flash. It is a very simple and easy way to add animations to your website.

## How to use CSS Animation?

CSS animation is very easy to use. All you have to do is to add the animation property to the element you want to animate. The animation property includes the animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

## Example

```css

div {

    width: 100px;

    height: 100px;

    background-color: red;

    animation-name: div-animate;

    animation-duration: 4s;

}

@keyframes div-animate {

    0% {

        background-color: red;

        transform: translateX(0px);

    }

    50% {

        background-color: blue;

        transform: translateX(20px);

    }

    100% {

        background-color: red;

        transform: translateX(60px)

    }

}

```

## What is the difference between animation and transition?

The difference between animation and transition is that animation is a change from one set of CSS styles to another. Transition is a change from one CSS style to another.

## Author

* [Junior Hirwa](https://github.com/HIRWA13)