< Back to Code

Customize transition object animation css

				
					<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<div class="circle circle4"></div>
<style>
    .circle1{
    width: 100px;
    height: 100px;
    background-color: #937DC2 ;
     position: relative;
     border-radius: 50%;
animation-timing-function: linear!important;

    }
    
    .circle2{
    width: 100px;
    height: 100px;
    background-color: #C689C6 ;
    position: relative;
    border-radius: 50%;
    animation-timing-function: ease!important;

    }
    .circle3{
    width: 100px;
    height: 100px;
    background-color: #FFABE1 ;
     position: relative;
     border-radius: 50%;
     animation-timing-function: ease-in!important;
    }
    .circle4{
    width: 100px;
    height: 100px;
    background-color: #FFE6F7 ;
    position: relative;
    border-radius: 50%;
     animation-timing-function: ease-in-out!important;
    } 
    
    .circle {
    animation: mymove 5s infinite;
}

@keyframes mymove {
  0% {left: 0;}
  50% {left: 100%;}
  100% {left: 0;}
}
</style>
				
			
				
					<div class="circle-another a-circle1"></div>
<div class="circle-another a-circle2"></div>
<div class="circle-another a-circle3"></div>
<div class="circle-another a-circle4"></div>
<style>
    .a-circle1{
    width: 100px;
    height: 100px;
    background-color: #937DC2 ;
     position: absolute;
     border-radius: 50%;
     animation-delay: 1s!important;


    }
    
    .a-circle2{
    width: 100px;
    height: 100px;
    background-color: #C689C6 ;
    position: absolute;
    border-radius: 50%;
    animation-delay: 1.5s!important;


    }
    .a-circle3{
    width: 100px;
    height: 100px;
    background-color: #FFABE1 ;
    position: absolute;
    border-radius: 50%;
    animation-delay: 1.2s!important;

    }
    .a-circle4{
    width: 100px;
    height: 100px;
    background-color: #FFE6F7 ;
     position: absolute;
    border-radius: 50%;
    animation-delay: 0.52s!important;

    } 
    
    .circle-another {
    animation: mymove-another 5s infinite;
}

@keyframes mymove-another {
  0% {scale: 1;}
  50% {scale: 1.5;opacity:0;}
  100% {scale: 1;}
}
</style>
				
			
				
					<div class="circle03 circle031"></div>
<div class="circle03 circle032"></div>
<div class="circle03 circle033"></div>
<div class="circle03 circle034"></div>
<style>
    .circle031{

    background-color: #937DC2 ;
     border-radius: 50%;
     animation-delay: 0.7s!important;


    }
    
    .circle032{

    background-color: #C689C6 ;
    border-radius: 50%;
     animation-delay: 0.4s!important;


    }
    .circle033{

    background-color: #FFABE1 ;
     border-radius: 50%;
     animation-delay: 0.8s!important;

    }
    .circle034{

    background-color: #FFE6F7 ;
    border-radius: 50%;
     animation-delay: 0.9s!important;

    } 
    
    .circle03 {
    animation: mymovenew 2s infinite;
    width: 10px;
    height: 10px;
    display: inline-block;
}

@keyframes mymovenew {
  0% {transform: translateY(0px);}
  50% {transform: translateY(-15px);}
  100% {transform: translateY(0px);}
}
</style>
				
			
				
					<div class="bubble"></div>
<style>
.bubble{  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow:
    0 0 20px #fff,
    -20px 0 80px #f0f,
    20px 0 80px #0ff,
    inset 0 0 50px #fff,
    inset 50px 0 80px #f0f,
    inset -50px 0 80px #0ff,
    inset 50px 0 300px #f0f,
    inset -50px 0 300px #0ff;
  animation: pulsate 6s linear infinite;
}

@keyframes pulsate {
  50% {
    box-shadow:
      0 0 20px #fff,
      20px 0 80px #f0f,
      -20px 0 80px #0ff,
      inset 0 0 50px #fff,
      inset -50px 0 80px #f0f,
      inset 50px 0 80px #0ff,
      inset -50px 0 300px #f0f,
      inset 50px 0 300px #0ff;
  }
}
</style>
				
			

© Copyright by JAYbranding – All rights reserved.

We would like to advise you in more detail.
Please enter information to receive a consultation