Top Color:
Main Color:
Bottom Color:
Header Image:
  • background1
  • background2
  • background3
  • background4
  • background5
  • background6
  • background7
  • background8
  • background9
Layout Style:
  • Wide
  • Boxed
Search

(+088) - 210 - 3647

Email : dnnskindev@gmail.com

Consulting Online !

Friday , April , 19 2024
You are here : Features  >  Short Codes  >  CSS3 Animations

Enter Title

scaleUp



  1. <div class="animation scaleUp">Add Content...</div>

periodic



  1. <div class="animation periodic1">Add Content...</div>
  2. <div class="animation periodic2">Add Content...</div>
  3. <div class="animation periodic3">Add Content...</div>
  4. <div class="animation periodic4">Add Content...</div>

rotateIn



  1. <div class="animation rotateIn">Add Content...</div>

rotateInUpLeft



  1. <div class="animation rotateInUpLeft">Add Content...</div>

rotateInDownLeft



  1. <div class="animation rotateInDownLeft">Add Content...</div>

rotateInUpRight



  1. <div class="animation rotateInUpRight">Add Content...</div>

rotateInDownRight



  1. <div class="animation rotateInDownRight">Add Content...</div>

fadeIn



  1. <div class="animation fadeIn">Add Content...</div>

fadeInUp



  1. <div class="animation fadeInUp">Add Content...</div>

fadeInDown



  1. <div class="animation fadeInDown">Add Content...</div>

fadeInLeft



  1. <div class="animation fadeInLeft">Add Content...</div>

fadeInRight



  1. <div class="animation fadeInRight">Add Content...</div>

fadeInUpBig



  1. <div class="animation fadeInUpBig">Add Content...</div>

fadeInDownBig



  1. <div class="animation fadeInDownBig">Add Content...</div>

fadeInLeftBig



  1. <div class="animation fadeInLeftBig">Add Content...</div>

fadeInRightBig



  1. <div class="animation fadeInRightBig">Add Content...</div>

flipInX



  1. div class="animation flipInX">Add Content...</div>

flipInY



  1. <div class="animation flipInY">Add Content...</div>

animationwidth

Web Design 90%
HTML/CSS 95%
Graphic Design 85%
DNN 75%


  1. <div class="progress progress-info">
  2. <div class="bar animation animationwidth" data-width=" 90%">Web Design 90%</div>
  3. </div>
  4. <div class="progress progress-success">
  5. <div class="bar animation animationwidth" data-width=" 95%">HTML/CSS 95%</div>
  6. </div>
  7. <div class="progress progress-warning">
  8. <div class="bar animation animationwidth" data-width=" 85%">Graphic Design 85%</div>
  9. </div>
  10. <div class="progress progress-danger">
  11. <div class="bar animation animationwidth" data-width="75%">DNN 75%</div>
  12. </div>