CSS

css animation

<style>
@keyframes animatename{
  0%{
    transform: translateY(3px);
  }
  100%{
    transform: translateY(-3px);
  }
}
.my-div{
  animation: animatename 1s linear infinite;
  /* animation shorthand */
  animation: animation-name animation-duration animation-direction animation-iteration-count
}
</style>

animation properties css

/* Animation-name: Specifies the name of the keyframe */
animation-name: clashing;

/* Animation-duration: Defines how the time is taken for the execution of animation. */
animation-duration: 10s;

/* Specifies the speed of the animation. */
animation-timing-function: ease;

/* Animation-delay: Specifies a delay before the animation will start */
animation-delay: 5ms;

/* Animation-iteration-count: Determines how many times an animation should be played */
animation-iteration-count: 3;

/* Animation-direction: Determines the play direction of animation(i.e alternate or reverse) */
animation-direction: normal;

/* Determines what values are applied by the animation outside the time it is executing */
animation-fill-mode: both;

/* Animation: Shorthand Property. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. */
animation: 4s linear 0s infinite alternate;

css animation

div:hover {
  background-color: #000;
  transition: background-color 400ms;
}

/* Or control over animation with transition timing */
div:hover {
  background-color: #000;
  transition: background-color 400ms ease-in-out;
}

/* timing - linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n) */

css animation

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translate3d(100px, 0, 0)
	}

	to {
		opacity: 1;
		transform: translateZ(0)
	}
}

.class-name{
  	/* advance */
	/* animation: 2s cubic-bezier(0.165, 0.84, 0.44, 1) .3s 1 fadeInRight; */
  
  	/* basic breakdown */
	animation-duration: 2s; /* the duration of the animation */
	animation-timing-function: ease-out; /* how the animation will behave */
	animation-delay: .3s; /* how long to delay the animation from starting */
	animation-iteration-count: 1; /* how many times the animation will play */
	animation-name: fadeInRight; /* the name of the animation we defined above */
}

animation css

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
/* 
name: name of the animation
duration: amount of time it takes to complete ex: 2s
timing-function: Specifies the speed curve of the animation ex: linear, ease, etc.
delay:Specifies a delay before the animation will start  
iteration-count: how many times to play the animation, ex: initial
direction: Specifies whether or not the animation should play in reverse on alternate cycles ex:forwards, backwards, alternate, alternate-reverse
fill-mode: Specifies what values are applied by the animation outside the time it is executing ex: none, forwards, backwards, both
animation-play-state: Specifies whether the animation is running or paused
*/

Css animations

Here a codePen with cool animations:
https://codepen.io/DevLorenzo/pen/ExgpvJM

css animation

.shrink { 
transition: all .2s ease-in-out; 
}

.shrink:hover { 
transform: scale(0.9); 
}

what is the animation property in html and css

with the help of animation properties in CSS we can control 
how the animation will be played throughout.

The animation properties in CSS are -
1) animation-duration : implies the time taken by the animation to finish.Forexample- animation-duration: 6s;  
2) animation-direction : implies the direction of the animation.Forexample- the direction in which the horse rides , the car moves , the insects crawls.
3) animation-delay: implies the time after which is the animation starts.Forexample- animation-delay: 3s; means after 3seconds the animation will start.
4) animation-iteration-count: implies how many times the animation will repeat.
5) animation-timing-function: the values can be ease,ease-in, ease-out, linear, ease-in-out.
6) animation-play-state: the values can be paused, running, initial, inherit.
7) animation-name: implies the name of the animation which is assigned by us.
8) animation-fill-mode: it specifies a style for the element when the animation is not playing.The values can be none,forwards, backwards, both, initial and inherit.
9) @keyframes: this is the most important.It specifies the different values of style in different intervals of time.The animation-name is used in @keyframes declaration.

NOTE: the syntax of every single letter, numbers, punctuation mark is very important.

CSS Animations

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

animation using css

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh
}

.pulse {
    width: 70px;
    height: 70px;
    background-color: red;
    border-radius: 50%;
    position: relative;
    animation: animate 3s linear infinite
}

css animation

Read this helpful, short and straightforward article to learn CSS animation perfectly.

https://medium.com/@Cafe_Code/learn-css-animation-asap-as-simple-as-possible-374b7874d4dd

css animation

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
#animate-area {
  width: 200px;
  height: 200px;
  background-image: url(http://placekitten.com/400/200);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 10s linear infinite alternate;
}

animation properties css

function party(){
  document.body.style.animation = 'party 2.5s infinite linear';
}

css animation

<!DOCTYPE html>
<html>
<body>
  <div class="cont">  
    <button class="btn"><span>Click me</span><img src="https://i.cloudup.com/2ZAX3hVsBE-3000x3000.png" height="62" width="62"></button>
      
        
    </div>
  <style>
  @-webkit-keyframes {
  }
  @-webkit-keyframes extend {
      0% {
          width: 600px;
          height: 200px;
          border-radius: 100px;
          } 10% {
          width: 610px;
          height: 210px;
          background: #fff;
          margin-left: - 5px;
          margin-top: - 5px;
          } 20% {
          width: 600px;
          height: 200px;
          background: #6fb07f;
          margin-left: 0px;
          margin-top: 0px;
          } 100% {
          width: 200px;
          height: 200px;
          border-radius: 100px;
          margin-left: 190px;
          background: #6fb07f;
          }
      }
  @keyframes extend {
      0% {
          width: 600px;
          height: 200px;
          border-radius: 100px;
          } 10% {
          width: 610px;
          height: 210px;
          background: #fff;
          margin-left: - 5px;
          margin-top: - 5px;
          } 20% {
          width: 600px;
          height: 200px;
          background: #6fb07f;
          margin-left: 0px;
          margin-top: 0px;
          } 100% {
          width: 200px;
          height: 200px;
          border-radius: 100px;
          margin-left: 190px;
          background: #f04014;
          }
      }
  @-webkit-keyframes {
  }
  @-webkit-keyframes disappear {
      0% {
          opacity: 1;
          } 20% {
          color: #fff;
          } 100% {
          opacity: 0;
          }
      }
  @keyframes disappear {
      0% {
          opacity: 1;
          } 20% {
          color: #fff;
          } 100% {
          opacity: 0;
          }
      }
  @-webkit-keyframes {
  }
  @-webkit-keyframes appear {
      0% {
          opacity: 0;
          } 70% {
          opacity: 0;
          } 100% {
          opacity: 1;
          }
      }
  @keyframes appear {
      0% {
          opacity: 0;
          } 70% {
          opacity: 0;
          } 100% {
          opacity: 1;
          }
      }
  html {
      background: rgb(165, 165, 165)
      }
  
  input, button, submit {
      border: none
      }
  
  .cont {
      position: absolute;
      width: 610px;
      height: 10px;
      left: 50%;
      top: 50%;
      margin: -100px 0 0 -300px
      }
  
  button {
      border-width: 1px;
      width: 600px;
      height: 200px;
      /*border-radius*/
      border-radius: 100px;
      background: #fff;
      position: absolute;
      border: 5px solid #09ec42
      }
  
  button > span {
      font-size: 48px;
      color: #06a19a
      }
  
  img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0
      }
  
  button:focus {
      /*animation*/
      -webkit-animation: extend 1s ease-in-out;
      -ms-animation: extend 1s ease-in-out;
      animation: extend 1s ease-in-out;
      -webkit-animation-fill-mode: forwards;
      /* Chrome, Safari, Opera */
      animation-fill-mode: forwards
      }
  
  button:focus > span {
      /*animation*/
      -webkit-animation: disappear 1s ease-in-out;
      -ms-animation: disappear 1s ease-in-out;
      animation: disappear 1s ease-in-out;
      -webkit-animation-fill-mode: forwards;
      /* Chrome, Safari, Opera */
      animation-fill-mode: forwards
      }
  
  button:focus > img {
      /*animation*/
      -webkit-animation: appear 1s ease-in-out;
      -ms-animation: appear 1s ease-in-out;
      animation: appear 1s ease-in-out;
      -webkit-animation-fill-mode: forwards;
      /* Chrome, Safari, Opera */
      animation-fill-mode: forwards
      }
  
  </style>
  <script>

document.addEventListener("DOMContentLoaded", function(event) {
  //Removing article link when on mobiforge
  console.log(document.referrer);
  if (parent !== window && document.referrer.indexOf('https://mobiforge.com') === 0 && document.referrer.indexOf('http://mobiforge.com') === 0)
  {  
    console.log(document.referrer);
    document.getElementById('article-link').className = "fade-out";
  }

});
  </script>
</body>
</html>

animation properties css

body{
background-color: purple;
}

@keyframes party{
    0% {background-color: red;}
    10% {background-color: orange;}
    20% {background-color: yellow;}
    30% {background-color: green;}
    40% {background-color: blue;}
    50% {background-color: purple;} 
}

@-webkit-keyframes party{
    0% {background-color: red;}
    10% {background-color: orange;}
    20% {background-color: yellow;}
    30% {background-color: green;}
    40% {background-color: blue;}
    50% {background-color: purple;} 
}

animation css explained

<!-Here we have a button that will animate a circle within it-->
<!--This is the HTML Element to Animate, Its parent is the HTML Body Element-->
<button>     
   Refresh the Screen <span class="circle" style="top: 27px; left: 82px"></span>
</button>

/* css for animatiing a circle inside a button to expand see video below */
button .circle{
  position: absolute; /*Positioned absolute inside the parent element, button*/
  background-color: white;
  width: 100px;
  height: 100px;
  border-radius: 50%;/*turns the item into a circle*/
  transform: translate(-50%, -50%) scale(0); /*scales it down to nothing, moves it
  											  along the x and y axis from origin*/  
  animation: circle-animation 0.5s ease-out; /*animation name, time, effect*/
}
@keyframes circle-animation {
  to{
    /*The Item is scaled out with the ease out effect above*/
    transform: translate(-50%, -50%) scale(3); /*scales the circle to ripple out*/
    opacity: 0; /*Then the circle disappears./*
  }  
}

animations css

window.addEventListener('scroll', () => {
  document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);

animation in css

div {
  animation: mymove 5s infinite;
}

CSS animation

#anim {
  animation-name: colorful;
  animation-duration: 3s;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

css animation

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

css animation

<div class="cssanimation hu__hu__"> Example </div>