Ads Top

What is the CSS Animation

How to create css animations?

The animation is the change one scene to another scene. CSS animation depends on the CSS properties, we can use CSS animation with all numeric CSS value.
As below example:


<style>
.anythingAnimation{ 
    -webkit-animation: anyName 2s infinite;
    animation: anyName 2s infinite;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    height: 100px; text-align: center; }

@-webkit-keyframes anyName {
    0% { font-size: 16px}
    50% {  font-size: 40px; font-weight: 700}
    100% {  font-size: 16px;}
}
@keyframes anyName {
    0% { font-size: 16px}
    50% {  font-size: 40px; font-weight: 700}
    100% {  font-size: 16px;}
}

.anythingNewAanimation {
  background: #0bf;
  font: normal 20px arial;
  -webkit-animation: animationName 2s infinite;
  animation: animationName 2s infinite;
  color: #fff; text-align: center; padding: 20px;
  max-width: 400px;
  margin: 20px auto;
}

@-webkit-keyframes animationName {
  from {background: #0bf;}
  to {background: 0b6;}
}

@keyframes animationName {
  from {background: #0bf;}
  to {background: #0b6;}
}
</style>

<div class="anythingAnimation">CSS Animations.</div>
   
<div class="anythingNewAanimation">CSS Animations changed background color.</div>

 
Code Demo

Animation Shorthand Property

animation: animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction
   
How many type of the animation-timing-function?
linear, ease(default value), ease-in, ease-out, ease-in-out, step-start, step-end, steps(int,start|end), cubic-bezier(n,n,n,n), initial, inherit

what is animation direction?
animation direction indicates that this is going to forwards or backward. It has four property normal: means this is forwards, reverse: means this is backward,
alternate: when start then go to the direction of the forwards and then go to backward it's cycling continues. And last is alternate-reverse: it's starting backward first then forwards it continues again and again.

CSS animation example as given screenshot:



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin0;
            padding0;
            fontnormal 16px arial;
        }
        .mainContainer {
            max-width400px;
            margin10px auto;
            background#eee;
            padding20px 30px;
        }
        .animateSec {
            positionrelative;
        }
        .animateButton {
            positionfixed;
            bottom30px;
            right10px;
            background#0bf;
            padding10px 20px;
            color#fff;
            border-radius5px;
        }
        .move {
            animation: MainRotation 5s infinite linear 2s;
        }
        .moveText {
            animation: MainRotationText 5s infinite linear 2s;
        }

        @keyframes MainRotation {
            0% {
                right10px;
            }
            50% {
                right-400px
            }
            100% {
                right-400px
            }
        }

        @-webkit-keyframes MainRotation {
            0% {
                right10px;
            }
            50% {
                right-400px
            }
            100% {
                right-400px
            }
        }

        @keyframes MainRotationText {
            0% {
                top30px
            }
            50% {
                top30px
            }
            75% {
                top-500px
            }
            100% {
                top30px
            }

        }

        @-webkit-keyframes MainRotationText {
            0% {
                top30px
            }
            50% {
                top30px
            }
            75% {
                top-500px
            }
            100% {
                top30px
            }
        }
    </style>
</head>

<body>
    <div class="mainContainer">
        <div class="animateSec moveText">Sheo Sagar ....<br><br><br>Lorem Ipsum is simply dummy text of the printing and
            typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
            unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
            only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
            popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
            recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            <br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
            electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
            Aldus PageMaker including versions of Lorem Ipsum.
            <br><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
            electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
            Aldus PageMaker including versions of Lorem Ipsum.
            <br><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
            electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
            Aldus PageMaker including versions of Lorem Ipsum.
            <br><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
            electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
            Aldus PageMaker including versions of Lorem Ipsum.
            <br><br>
            End...
        </div>
        <div class="animateButton move">Any Button</div>

    </div>
</body>

</html>

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.