• 01666-222229
  • info@practicise.com
  • Sircl Tech Pvt. Ltd, Red Light Chowk, Sirsa
Search
Close this search box.
Course Content
CSS Basic
0/1
What is CSS?
00:00
Ways To Add CSS
0/4
Introduction
00:00
Inline CSS
00:00
Internal CSS
00:00
External CSS
00:00
CSS Colors
0/6
Named Colors
00:00
Hexadecimal Colors
00:00
RGB Colors
00:00
RGBA Colors
00:00
HSL Colors
00:00
HSLA Colors
00:00
CSS Selectors
0/1
Introduction
CSS Comments
0/1
Introduction
CSS Text Formatting
0/1
Various types of Text Formatting
00:00
CSS Backgrounds
0/1
Introduction
00:00
CSS Borders
0/1
Introduction
CSS Outline
0/1
Introduction
00:00
CSS Fonts
0/1
Font Family
00:00
CSS Height and Width
0/1
Introduction
00:00
CSS Margins and Paddings
0/2
CSS Margin
00:00
CSS Padding
00:00
CSS Box Models
0/1
What is CSS Box Model?
00:00
CSS Align
0/5
Text Alignment (text-align)
00:00
Horizontal Centering (margin and auto)
00:00
Vertical Alignment
00:00
Grid Centering
00:00
Table Cell Alignment (vertical-align for table cells)
00:00
CSS Icons
0/1
Introduction
00:00
CSS Links
0/1
Introduction
00:00
CSS Lists
0/1
Introduction
00:00
CSS Tables
0/1
Introduction
00:00
CSS Gradient
0/4
How to use CSS Gradients and its Types
00:00
Linear Gradients
00:00
Radial Gradients
00:00
Conic Gradients
00:00
CSS Display Properties
0/1
Introduction
00:00
CSS Max-Width Property
0/1
Introduction
00:00
CSS Positioning Elements
0/1
Introduction
00:00
CSS Z-Index Property
0/1
Introduction
00:00
CSS Overflow
0/1
Introduction
00:00
CSS Float
0/1
Introduction
00:00
CSS Opacity
0/1
Introduction
00:00
CSS Pseudo-classes
0/1
Various Types of Pseudo-classes
00:00
CSS Pseudo-Elements
0/1
Various Types of Pseudo-Elements
00:00
CSS Forms
0/1
Introduction
00:00
CSS Flexbox
0/3
Introduction
00:00
Container Properties
00:00
Item Properties
00:00
CSS Nav
0/2
How to create Vertical Navbar using CSS?
00:00
How to create Horizontal Navbar using CSS?
00:00
CSS Dropdowns
0/1
Dropdown Creation
00:00
CSS Buttons
0/1
Introduction
00:00
CSS Cards
0/1
How to create Cards using CSS?
00:00
CSS Image Gallery
0/1
How create an image Gallery using css?
00:00
CSS Media Queries
0/1
Introduction
00:00
CSS Variables
0/1
What is CSS Variables
00:00
CSS 2D Transforms
0/1
Various types of 2D Transforms
00:00
CSS 3D Transforms
0/1
Various types of 3D Transforms
00:00
CSS Transition
0/1
Types of CSS Transition
00:00
CSS Animation
0/8
What are CSS Animations
00:00
The @keyframes Rule
00:00
Animation Duration
00:00
Animation Delay
00:00
Animation Iteration Count
00:00
Animation Direction
00:00
Animation Timing Function
00:00
Animation Shorthand property
00:00
CSS Grid Layout
0/3
CSS Layout
00:00
Grid Container
00:00
Grid Item
00:00
CSS
About Lesson

Animation Timing Function

The animation shorthand property in CSS allows you to specify multiple animation-related properties in a single declaration. It includes properties such as animation name, duration, timing function, delay, iteration count, direction, fill mode, and play state. Here’s the syntax for the animation shorthand property:

Example:

CSS
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Now, let’s break down each property:

  • name: Specifies the name of the animation, defined using @keyframes.
  • duration: Specifies the duration of the animation.
  • timing-function: Specifies the timing function for the animation (e.g., ease, linear, ease-in, ease-out, ease-in-out).
  • delay: Specifies the delay before the animation starts.
  • iteration-count: Specifies the number of times the animation should repeat.
  • direction: Specifies whether the animation should play in reverse (reverse), alternate direction on each cycle (alternate), or both (alternate-reverse).
  • fill-mode: Specifies how the animation should apply styles before and after it is executed.
  • play-state: Specifies whether the animation is running (running) or paused (paused).
HTML
<!DOCTYPE html>
<html>

<head>
    <style>
        .out{
            height: 100px;
            width:100px;
            position: relative;
        }

        .in {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: black;
            position: relative;
            animation-name: example;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        @keyframes example {
            0% {
                background-color: pink;
                left: 0px;
                top: 0px;
            }

            25% {
                background-color: yellow;
                left: 200px;
                top: 0px;
            }

            50% {
                background-color: red;
                left: 200px;
                top: 200px;
            }

            75% {
                background-color: orange;
                left: 0px;
                top: 200px;
            }

            100% {
                background-color: pink;
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>

<body>
<div class="out">
    <div class="in"></div>
</div>
    

</body>

</html>

In this example:

  • We have four div elements with the class .box, each with a different animation direction (move-right, move-left, move-up, move-down).
  • The animations are defined using @keyframes and specify different transformations (translation along X or Y axis).
  • Each div element has a different animation applied to it using the animation shorthand property, with different durations, timing functions, and iteration counts.
  • You can observe how each div moves in a different direction based on the animation applied to it.

Output:

Previous
Next