Introduction to Animation

#BuildTogether Day23/100

I am super excited that I am 2 days away from getting my new badge, i.e my 25th-day Milestone… 🙅🏽 Although I am tired from the day, but I am super happy with all the progress I have made…😇

Animation

We all love moving things, right ;) To make a website more interactive and dynamic, adding animation effects always comes in handy.

Keyframes

In CSS, the animation is a smooth transition of an HTML element from one style to another. The animation consists of different frames that gradually replace one another.

You can create keyframes, that is, properties that should be applied to an element at a given time. The browser calculates the intermediate values between these frames.

The @keyframes rule

Keyframes are the basis of CSS animation. They determine what the animation looks like at each point of the timeline. Keyframes are created using the @keyframesrule:

Each @keyframes consists of the following parts:

  • Animation name: to describe your animation.
  • Animation steps: represented in percentages. 0% represents the initial state of the animation, and 100% represents its final state; you can create up to 100 steps.
  • CSS properties: can be defined for each step of the timeline.

Animation for changing font size:

In this example, when animation is 0% complete, the height of the element is 10%. When the animation is 50% complete, the height is increased to 30%. In the final state, the height is back to 10%.

Instead of 0% and 100%, you can use the keywords from and to . The above code can be represented as:

If 0% or 100% are not specified, the browser creates them using initially set values of the animated property.

Applying keyframes to the element

In order for the animation to start, we need to know two basic CSS properties:

  • animation-name: the value of this property is the name of the animation as defined in @keyframes.
  • animation-duration is responsible for the duration of the animation. The duration can be specified in seconds (for example, 2s) or milliseconds (200ms).

The previous font change animation can be applied to <h1> element like below:

h1 {
animation-name: change-font-size;
animation-duration: 3s;
}
  • animation-iteration-count indicates how many times an animation cycle is played. The value for this property can be from 0 to infinite (animation played endlessly) Negative numbers are not accepted.

animation is the general universal property to write all three properties above, animation: change-font-size 2s 3;

Crossbrowser

If you want to use animation in earlier browser versions (pre-2017), you need to duplicate the properties and the @keyframes rule with the appropriate prefixes: -webkit- for versions of Chrome, Safari, Android, -moz- for Mozilla Firefox, and -o- for Opera.

That is all in animations today.. =D Lets pick this up tomorrow again…👋

--

--

--

Technical Speaker and an aspiring writer with avid addiction to gadgets, meet-up groups, Kotlin and paper crafts.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Scratching the surface of JS++

Keeping up with the great ape🦍

How to make Isotope work in a Gatsby site

Job Scheduling with Cron

Highly Reusable React Components

JavaScript’s Prototypal Inheritance Explained Using CSS

Anguar vs. React — choosing the right technology for your next project

Refactoring and Code Review in React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Henna Singh

Henna Singh

Technical Speaker and an aspiring writer with avid addiction to gadgets, meet-up groups, Kotlin and paper crafts.

More from Medium

Setting Up a Netlify Contact Form in Your React Web Application

Rotating 3D text sphere animation using ReactJS

Clone of Realme Website

Home Page

Hosting an HTML and CSS project with Firebase.