Giới thiệu 1 số Animation CSS hay trên CodePen

Giới thiệu:

CSS3 animations cho phép bạn thực hiện những hiệu ứng động với hầu hết các đối tượng HTML trên trang web.

Một animation cho phép một đối tượng chuyển đổi từ style này sang một style khác. Trong một animation, bạn có thể thay đổi style nhiều lần với nhiều thuộc tính CSS khác nhau.

Dưới đây là 1 số những animation CSS hay và đẹp mắt.

1. Dodecahedron

Một hình chữ nhật tinh tế, đẹp, tạo ra một hình ảnh động hoàn toàn với CSS.

HTML(Pug)

.view
  .plane.main
    - for (var x = 0; x < 6; x++)
      .circle

CSS(Sass)

$side: 120px
$l: 90px
$num: 10
$dur: 10s

@mixin plane($w, $h)
  awidth: $w
  height: $h
  transform-style: preserve-3d
  
@mixin view($p)
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  perspective: $p

@mixin center
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin: auto      

html, body
  background: #222
  overflow: hidden
  awidth: 100%
  height: 100%
  
.view
  @include view(400)
    
.plane
  @include plane($side, $side)
  
  &.main
    @include center
    transform: rotateX(60deg) rotateZ(-30deg)
    animation: rotate 20s infinite linear
      
    .circle
      awidth: $side
      height: $side
      position: absolute
      transform-style: preserve-3d
      border-radius: 100%
      //border: 2px solid white
      box-sizing: border-box
      box-shadow: 0 0 60px rgba(crimson, 1), inset 0 0 60px rgba(crimson, 1)
  
      &::before, &::after
        content: '
        display: block
        @include center
        awidth: 10%
        height: 10%
        border-radius: 100%
        background: rgba(crimson, 1)
        //border: 4px solid black
        box-sizing: border-box
        box-shadow: 0 0 60px 2px rgba(crimson, 1)

      &::before
        transform: translateZ(-$l)
      &::after
        transform: translateZ($l)
  
      @for $i from 1 through 5
        &:nth-child(#{$i})
          transform: rotateZ($i / 5 * 360deg) rotateX(63.435deg)
  
@keyframes rotate
  0%
    transform: rotateX(0) rotateY(0) rotateZ(0)
  100%
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)

Demo

2.Flat Design Camera

Nhấn nút shutter trên camera flat để xem nó tạo ra một bức ảnh bằng cách sử dụng hình ảnh động CSS.

HTML

<div id="camera">
  <div class="strip">
  </div>
  <div class="lens">
  </div>
  <div class="led">
  </div>
  <div class="btn">
  </div>
</div>
<div id="panel">
  <div class="pic">
    <img src="http://lorempixel.com/150/150/people"/>
  </div>
  <center>
    <a href="#" class="lnk">My Portfolio</a>
  </center>
</div>
<div class="shadow">
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=News+Cycle:400);
            
body {
  margin:0;
  padding:0;
  background-color:#333;
}

#camera, #panel {
  position:absolute;
  left:50%; top:50%;
  awidth:300px; height:300px;
  margin:-150px;  
  background:#eaeaea;
  border:1px solid rgba(0,0,0,.2); border-radius:50px;
  overflow:hidden;
  transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
}

#panel {
  box-shadow: inset 0px -3px 0px rgba(0,0,0,.2);
  -webkit-transform:rotate(-90deg) scale(0);
  -moz-transform:rotate(-90deg) scale(0);
  -ms-transform:rotate(-90deg) scale(0);
  -o-transform:rotate(-90deg) scale(0);
  transform:rotate(-90deg) scale(0);
}

#camera {
  z-index:2;
}

.btn {
  position: absolute;
  top: 22px; right: 35px;
  awidth: 40px; height: 30px;
  background-color: #2e3e4f;
  border-radius: 15px;
  box-shadow: 0px 3px 0px rgba(0,0,0,.4);
  transition:all .2 ease-in-out;
  -webkit-transition:all .2 ease-in-out;
  -moz-transition:all .2 ease-in-out;
  -ms-transition:all .2 ease-in-out;
  -o-transition:all .2 ease-in-out;
  animation: .5s btn;
  -webkit-animation: .5s btn;
  -moz-animation: .5s btn;
  -ms-animation: .5s btn;
  -o-animation: .5s btn;
  animation-iteration-count:5;
  -webkit-animation-iteration-count:5;
  -moz-animation-iteration-count:5;
  -ms-animation-iteration-count:5;
  -o-animation-iteration-count:5;
}
            
.btn:hover {
  cursor:pointer;
  margin-top:2px;
  box-shadow: 0px 1px 0px rgba(0,0,0,.4);
}
            
.shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  awidth: 240px; height: 20px;
  margin: 170px -120px 0px;             
  border-radius: 50%;
  background-color: rgba(0,0,0,.3);
  transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
}
            
.strip {
  height: 110px;
  background-color: #54b59a;
  border-top: 10px solid #479a83;
  border-bottom: 10px solid #479a83;
  margin: 80px 0px;
  box-shadow: 0px 2px 0px rgba(0,0,0,.4);
}
            
.lens {
  position:absolute;
    top:50%; left:50%;
    awidth:144px; height:144px;
  margin:-90px;  
    border:18px solid #b44b37;
  border-radius:50%;
  background-color:#111;
  box-shadow: 0px 5px 0px rgba(0,0,0,.4);
}
            
.lens:before {
  content: ';
  position: absolute;
  awidth: 50px; height: 50px;
  margin: 27px;
  border: 20px solid rgb(60, 60, 60);
  border-radius: 50%;
    background: rgb(34, 34, 34);
}
            
.lens:after {
  content: ';
  position: absolute;
  awidth: 8px; height: 8px;
  margin: 57px;  
  border: 11px solid rgb(22, 22, 22);
  border-radius: 50%;
  background: rgb(131, 131, 131);  
}
            
.led {
  position: absolute;
  left: 35px; top: 30px;  
  awidth: 15px; height: 15px;
  border-radius: 50%;
  background-color: rgb(255, 136, 115);
  box-shadow: inset 0px 1px 0px rgba(0,0,0,.1);
  -webkit-animation: led .8s infinite;
  -moz-animation: led .8s infinite;
  -ms-animation: led .8s infinite;
  -o-animation: led .8s infinite;
  animation: led .8s infinite;
}
            
.pic {
  position: absolute;
  top: 50%; left: 50%;
  awidth: 150px; height: 150px;
  margin: -120px -75px;
  border: 5px solid #ccc;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0px 2px 0px rgba(0,0,0,.2);
}
            
.lnk {
  position: relative;
  top: 220px;
  font: 22px 'News Cycle', sans-serif;
  color: #777;
  text-align: center;
  text-decoration:none;
  cursor:pointer;
  text-transform:uppercase;
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
}
            
.lnk:hover {
  text-shadow: 0px 1px 0px rgba(0,0,0,.2);
}

/* slide */
body.open > #panel {
  -webkit-transform-origin: 0% 100%;
  -webkit-transform:rotate(0deg) scale(1);
  -moz-transform-origin: 0% 100%;
  -moz-transform:rotate(0deg) scale(1);
  -ms-transform-origin: 0% 100%;
  -ms-transform:rotate(0deg) scale(1);
  -o-transform-origin: 0% 100%;
  -o-transform:rotate(0deg) scale(1);
  transform-origin: 0% 100%;
  transform:rotate(0deg) scale(1);
  margin-left:0;
}

body.open > #camera {
  margin-left:-300px;
}

body.open > .shadow {
  margin: 170px -260px 0px;
  awidth:520px;
}

/* keyframes */
@-webkit-keyframes led {
  from {
    opacity:.2;
  }
  
  to {
    opacity:1;
  }
}

@-moz-keyframes led {
  from {
    opacity:.2;
  }
  
  to {
    opacity:1;
  }
}

@-ms-keyframes led {
  from {
    opacity:.2;
  }
  
  to {
    opacity:1;
  }
}

@-o-keyframes led {
  from {
    opacity:.2;
  }
  
  to {
    opacity:1;
  }
}

@keyframes led {
  from {
    opacity:.2;
  }
  
  to {
    opacity:1;
  }
}

@-webkit-keyframes btn {
  from {
    margin-top:0px;
    top: 22px;
  }
  
  to {
    margin-top:2px;
    box-shadow: 0px 1px 0px rgba(0,0,0,.4);
  }
}

@-moz-keyframes btn {
  from {
    margin-top:0px;
    top: 22px;
  }
  
  to {
    margin-top:2px;
    box-shadow: 0px 1px 0px rgba(0,0,0,.4);
  }
}

@-ms-keyframes btn {
  from {
    margin-top:0px;
    top: 22px;
  }
  
  to {
    margin-top:2px;
    box-shadow: 0px 1px 0px rgba(0,0,0,.4);
  }
}

@-o-keyframes btn {
  from {
    margin-top:0px;
    top: 22px;
  }
  
  to {
    margin-top:2px;
    box-shadow: 0px 1px 0px rgba(0,0,0,.4);
  }
}

@keyframes btn {
  from {
    margin-top:0px;
    top: 22px;
  }
  
  to {
    margin-top:2px;
    box-shadow: 0px 1px 0px rgba(0,0,0,.4);
  }
}

JS

$(function(){
  $('.btn').click(function(){
    $('body').hasClass('open') ? $('body').removeClass('open'):$('body').addClass('open')
  })
})

Demo:

3.Day and Night Transition

Nhấn nút để xem chuyển đổi từ ban ngày sang đêm.

HTML

<div id="fullpage">  
  <div class="section">
    <p id="info">Scroll down...</p>
                <div class="time-circle">
                              <div class="sun"></div>
                              <div class="moon">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                              </div>
                              <div class="stars">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                              </div>
                              <div class="water"></div>
                        </div>
                <div id="intro-text">
                      <h1 href="#">day night simulation</h1>
                      <h4>by Szymon Stypa, inspired by pens on Codepen</h4>
                        </div>
    <div id="switch">
      <div id="circle"></div>
    </div>
              </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato);

#info {
  position: absolute;
  left: 5%;
}
body {
  padding: 0;
    margin: 0;
    font-family: 'Lato';
  text-align: center;
}
.section {
    padding-top: 40px;
    font-size: 1em;
    text-align: center;
    background: #f1ede3;
    awidth: 100%;
    height: 800px;
    color: #555;
  
    -webkit-transition: background 0.5s ease-in-out;
        transition: background 0.5s ease-in-out;
}
.night .section {
    background: #080d17;
  color: #e9e5d5;
}
.night #intro-text {
    color: #e9e5d5;
}
.time-circle {
  position: relative;
  background: linear-gradient(to bottom, #BE4405, #F6C60C);
  awidth: 400px;
  height: 400px;
  border-radius: 50%;
  border: 4.5px solid #555;
  overflow: hidden;
  padding: 0px;
  margin: 0 auto;
  margin-bottom: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  text-align: center;

  -webkit-transition: all 1.1s ease-in-out;
        transition: all 1.1s ease-in-out;
}
.night .time-circle{
  background: linear-gradient(to bottom, #111936, #285A7B);
  border-color: #e9e5d5;
}
.sun {
  margin-top: 20px;
  background: #F2EF88;
  box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);
  awidth: 30%;
  height: 30%;
  border-radius: 50%;
  position: relative;
  left: 35%;
  top: 48%;

  -webkit-animation: pulse 5s ease infinite alternate;
    animation: pulse 5s ease infinite alternate;
  -webkit-transition: all 1.1s 0.4s ease;
        transition: all 1.1s 0.4s ease;
}
@keyframes pulse {
    0% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
    50% {box-shadow: 0 0 40px rgba(242, 239, 136, 1);}
    100% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
}
@-webkit-keyframes pulse {
    0% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
    50% {box-shadow: 0 0 40px rgba(242, 239, 136, 1);}
    100% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
}
.night .sun {
  top: 70%;
  left: 20%;

  -webkit-transition: all 1.1s 0s ease;
          transition: all 1.1s 0s ease;
}
.moon {
  position: absolute;
  margin-top: 20px;
  background: #d9d8d0;
  box-shadow: inset -10px 2px 0 0px #899098;
  awidth: 22.5%;
  height: 22.5%;
  border-radius: 100%;
  position: relative;
  left: 120%;
  margin-left: -50px;
  top: -50%;
  overflow: hidden;

  -webkit-transition: all 1.1s 0s ease;
        transition: all 1.1s 0s ease;
}
.night .moon {
  left: 65%;
  top: -10%;

  -webkit-transition: all 1.1s 0.4s ease;
          transition: all 1.1s 0.4s ease;
}
.moon div:nth-child(n) {
  position: relative;
  background: #b9b8b0;
  border-radius: 50%;
  box-shadow: inset 4px -2px 0 0px #535457;
}
.moon div:nth-child(1) {
  top: 25%;
  left: 12%;
  awidth: 27%;
  height: 27%;
}
.moon div:nth-child(2) {
  top: -11%;
  left: 60%;
  awidth: 16%;
  height: 16%;
}
.moon div:nth-child(3) {
  top: 25%;
  left: 44%;
  awidth: 16%;
  height: 16%;
}
.stars {
  opacity: 0;
  margin-left: 100px;
  top: 0;
  left: 0;
  -webkit-transition: all 0.8s 0s ease;
        transition: all 0.8s 0s ease;
  z-index: 1000;
}
.night .stars {
  opacity: 1;

  -webkit-transition: all 3s 0.4s ease;
        transition: all 3s 0.4s ease;
}
.stars div:nth-child(n) {
  position: absolute;
  background: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 1);
  overflow: hidden;
  awidth: 0.4%;
  height: 0.4%;

  margin-left: 20%;
  margin-top: -20%;

  -webkit-transition: all 1s 0s ease;
        transition: all 1s 0s ease;
}
.night .stars div:nth-child(n) {
  margin-left: 0;
  margin-top: 0;

  -webkit-transition: all 1s 0.4s ease-out;
        transition: all 1s 0.4s ease-out;  
}
.stars div:nth-child(1) {
  left: 25%;
  top: 30%;
}
.stars div:nth-child(2) {
  left: 55%;
  top: 20%;
}
.stars div:nth-child(3) {
  left: 60%;
  top: 60%;
}
.stars div:nth-child(4) {
  left: 40%;
  top: 45%;
}
.stars div:nth-child(5) {
  left: 15%;
  top: 55%;
}
.stars div:nth-child(6) {
  left: 40%;
  top: 10%;
}
.stars div:nth-child(7) {
  left: 80%;
  top: 55%;
}
.water {
  position: absolute;
  background: repeating-radial-gradient(ellipse farthest-corner at center -400%, #f5c30e 30%, #518eac 90%) repeat scroll 0 0 #518eac;
  awidth: 100%;
  height: 200px;
  top: 68%;

  -webkit-transition: all 1.1s ease;
        transition: all 1.1s ease;

}
.night .water{
  background: repeating-radial-gradient(ellipse farthest-corner at center -400%, #7fa1bb 30%, #1d425a 90%) repeat scroll 0 0 #1d425a;
}
#switch,
#circle {
  height: 30px;
  -webkit-transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
          transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
} 
#switch {
  awidth: 60px;
  margin: 0 auto;
  border: 2px solid #DA8508;
  border-radius: 27px;
  background: #DA8508;
  position: relative;
}
#circle {
  margin-top: 5%;
  margin-left: 5%;
  awidth: 40%;
  height: 80%;
  border-radius: 50%;
  box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
  background: #e9e5d5;
}
.switched {
  border-color: #1C3958 !important;
  background: #1C3958 !important;
}
.switched #circle {
  margin-left: 55%;
  background: #e9e5d5;
}

JS

$("#switch").click(function () {
    if ($("#fullpage").hasClass("night")) {
        $("#fullpage").removeClass("night");
        $("#switch").removeClass("switched");
    }
    else {
        $("#fullpage").addClass("night");
        $("#switch").addClass("switched");

    }
});

Demo:

4. Star Wars: The Force Awakens

Tiêu đề từ bộ phim Star Wars sắp tới được tạo bằng CSS, HTML và một ít JavaScript.

HTML

<div class="starwars-demo">
    <img src="//cssanimation.rocks/demo/starwars/images/star.svg" alt="Star" class="star">
    <img src="//cssanimation.rocks/demo/starwars/images/wars.svg" alt="Wars" class="wars">
    <h2 class="byline" id="byline">The Force Awakens</h2>
  </div>

CSS

/* Animation properties */
.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}
.byline span {
  animation: spin-letters 10s linear infinite;
}
.byline {
  animation: move-byline 10s linear infinite;
}

/* Keyframes */
@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

@keyframes wars {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(0.5em);
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

@keyframes spin-letters {
  0%, 10% {
    opacity: 0;
    transform: rotateY(90deg);
  }
  30% {
    opacity: 1;
  }
  70%, 86% {
    transform: rotateY(0);
    opacity: 1;
  }
  95%, 100% {
    opacity: 0;
  }
}

@keyframes move-byline {
  0% {
    transform: translateZ(5em);
  }
  100% {
    transform: translateZ(0);
  }
}

/* Make the 3D work on the container */
.starwars-demo {
  perspective: 800px;
  transform-style: preserve3d;
}

/* General styles and layout */
body {
  background: #000 url(//cssanimation.rocks/demo/starwars/images/bg.jpg);
}

.starwars-demo {
  height: 17em;
  left: 50%;
  position: absolute;
  top: 53%;
  transform: translate(-50%, -50%);
  awidth: 34em;
}

.byline span {
  display: inline-block;
}

img {
  awidth: 100%;
}

.star, .wars, .byline {
  position: absolute;
}

.star {
  top: -0.75em;
}

.wars {
  bottom: -0.5em;
}

.byline {
  color: #fff;
  font-family: "ITC Serif Gothic", Lato;
  font-size: 2.25em;
  left: -2em;
  letter-spacing: 0.4em;
  right: -2em;
  text-align: center;
  text-transform: uppercase;
  top: 29%;
}

/*** Media queries for adjusting to different screen sizes ***/

@media only screen and (max-awidth: 600px) {
  .starwars-demo {
    font-size: 10px;
  }
}

@media only screen and (max-awidth: 480px) {
  .starwars-demo {
    font-size: 7px;
  }
}

JS

/* Learn how to create this and much more with this email course:

https://cssanimation.rocks/courses/animation-101/

MANY THANKS TO @tadywankenobi for the following JS to handle the text in the byline:

The following JS takes in the byline and splits it into letters, each one wrapped in a span. We need to create the spans as nodes, we can't just add them to the HTML using innerHTML, as to do so would mean the CSS won't affect the span because it doesn't recognise the tag as existing. It's an old problem we run into time and again.

*/

var byline = document.getElementById('byline');     // Find the H2
bylineText = byline.innerHTML;                                      // Get the content of the H2
bylineArr = bylineText.split(');                                   // Split content into array
byline.innerHTML = ';                                                      // Empty current content

var span;                   // Create variables to create elements
var letter;

for(i=0;i<bylineArr.length;i++){                                    // Loop for every letter
  span = document.createElement("span");                    // Create a <span> element
  letter = document.createTextNode(bylineArr[i]);   // Create the letter
  if(bylineArr[i] == ' ') {                                             // If the letter is a space...
    byline.appendChild(letter);                 // ...Add the space without a span
  } else {
        span.appendChild(letter);                       // Add the letter to the span
    byline.appendChild(span);                   // Add the span to the h2
  }
}

Demo:

5. 3D Solar System

Một hệ mặt trời khác, lần này là 3D. Sử dụng shading tuyệt đẹp.

HTML

<ul class="wrapper">
  <div class="sun">
    <div class="star"></div>
  </div>
  <div class="mercury">
    <div class="planet">
      <div class="shadow"></div>
    </div>
  </div>
  <div class="venus">
    <div class="planet">
      <div class="shadow"></div>
    </div>
  </div>
  <div class="earth">
    <div class="planet"><div class="shadow"></div></div>
  </div>
  <div class="mars">
    <div class="planet"><div class="shadow"></div></div>
  </div>
  <div class="jupiter">
    <div class="planet"><div class="shadow"></div></div>
  </div>
</ul>

CSS

html {
  background-color: #000;
}
body{
  height: 100%;
  top: 0px;
  bottom: 0px;
}
@keyframes spinsun {
  0% { transform: rotate(0); }
  100%   { transform: rotate(-360deg); }
}
@keyframes shadow {
  0% { background-position: 130% 0%; }
  33%{ background-position: 50% 0%; }
  55% { background-position: 0% 0%; }
  80%{ background-position: -50% 0%; }
  100%{ background-position: -50% 0%; }
}
@keyframes orbitmercury {
  0% { z-index:2; transform: rotateY(0); }
  49% { z-index:2; }
  50% { z-index:-2; }
  99% { z-index:-2; }
  100%   { z-index:2; transform: rotateY(360deg); }
}
@keyframes orbitvenus {
  0% { z-index:3; transform: rotateY(0); }
  49% { z-index:3; }
  50% { z-index:-3; }
  99% { z-index:-3; }
  100%   { z-index:3; transform: rotateY(360deg); }
}
@keyframes orbitearth {
  0% { z-index:4; transform: rotateY(0); }
  49% {z-index:4;}
  50% {z-index:-4;}
  99% {z-index:-4;}
  100%   { z-index:4; transform: rotateY(360deg);}
}
@keyframes orbitmars {
  0% { z-index:5; transform: rotateY(0); }
  49% { z-index:5; }
  50% { z-index:-5; }
  99% { z-index:-5; }
  100%   { z-index:5; transform: rotateY(360deg); }
}
@keyframes orbitjupiter {
  0% { z-index:6; transform: rotateY(270); }
  49% { z-index:6; }
  50% { z-index:-6; }
  99% { z-index:-6; }
  100%   { z-index:6; transform: rotateY(360deg); }
}
@keyframes orbitsaturn {
  0% { z-index:7; transform: rotateY(270); }
  49% { z-index:7; }
  50% { z-index:-7; }
  99% { z-index:-7; }
  100%   { z-index:7; transform: rotateY(360deg); }
}
/* Keep planet image flat */
@keyframes anti-spin {
  from { transform: rotateY(0); }
  to   { transform: rotateY(-360deg); }
}
@keyframes anti-spin-rings {
  from { transform: rotateY(0) rotateX(73deg); }
  to   { transform: rotateY(-360deg) rotateX(73deg); }
}

/* scene wrapper */
.wrapper{
  position:relative;
  margin: 0 auto;
  display:block;
  margin-top: 200px;
  perspective: 1000px;
    perspective-origin: 60% 50%;
  transform: rotate(-10deg);
  
}
.wrapper > div {
  position: relative;
  margin: 0 auto;
  transform-style: preserve-3d;
  height: 0px;
}
.sun {
  awidth: 250px;
  position: absolute;
  top: 0px;
  z-index: 1;
  height: 125px !important;
}
.sun .star {
  awidth: 250px;
  height: 250px;
  background: url(http://www.waynedunkley.com/img/solar_system/sun.png) no-repeat;
  background-size: cover;
  border-radius: 250px;
  margin: 0 auto;
  animation: spinsun 40s infinite linear;
}
.planet {
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
  animation-iteration-count: infinite;
  overflow:hidden;
}
.shadow {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: transparent url(http://www.waynedunkley.com/img/solar_system/shadow.png) 0% 0% no-repeat;
  background-size: cover;
  border-radius: 100%;
}
.mercury {
  position: absolute;
  awidth: 400px;
  z-index:2;
  animation: orbitmercury 12s infinite linear;
  top: -7.5px; /*half of planets height to keep orbits in line*/
}
.mercury .planet {
  awidth:15px;
  height:15px;
  background-image: url(http://www.waynedunkley.com/img/solar_system/mercury.png);
  animation: anti-spin 12s infinite linear;
}
.mercury .shadow {
  animation: shadow 12s infinite linear;
}
.venus {
  position: absolute;
  awidth: 506px;
  z-index:3;
  animation: orbitvenus 15s infinite linear;
  top: -19px;
}
.venus .planet {
  awidth:38px;
  height:38px;
  background-image: url(http://www.waynedunkley.com/img/solar_system/venus.png);
  animation: anti-spin 15s infinite linear;
}
.venus .shadow {
  animation: shadow 15s infinite linear;
}
.earth {
  position: absolute;
  awidth: 610px;
  z-index:4;
  animation: orbitearth 20s infinite linear;
  top: -20px;
}
.earth .planet {
  awidth:40px;
  height:40px;
  background-image: url(http://www.waynedunkley.com/img/solar_system/earth.png?v=2);
  animation: anti-spin 20s infinite linear;
}
.earth .shadow {
  animation: shadow 20s infinite linear;
}
.mars {
  position: absolute;
  awidth: 706px;
  z-index:5;
  animation: orbitmars 30s infinite linear;
  top: -11px;
}
.mars .planet {
  awidth:22px;
  height:22px;
  background-image: url(http://www.waynedunkley.com/img/solar_system/mars.png);
  animation: anti-spin 30s infinite linear;
}
.mars .shadow {
  animation: shadow 30s infinite linear;
}
.jupiter {
  position: absolute;
  awidth: 1100px;
  z-index:6;
  animation: orbitjupiter 50s infinite linear;
  top: -64px;
}
.jupiter .planet {
  awidth:128px;
  height:128px;
  background-image: url(http://www.waynedunkley.com/img/solar_system/jupiter.png);
  animation: anti-spin 50s infinite linear;
}
.jupiter .shadow {
  animation: shadow 50s infinite linear;
}

Demo:

6. ASCII AT-AT

Chiến tranh giữa các vì sao đã truyền cảm hứng cho nhân viên AT-AT, được vẽ bằng cách sử dụng văn bản với màu sắc được tô điểm trong CSS. Một hiệu ứng funky.

HTML

<article>
  <pre class="candybox2">           ________
      _,.-Y  |  |  Y-._
  .-~"   ||  |  |  |   "-.
  I" ""=="|" !""! "|"[]""|     _____
  L__  [] |..------|:   _[----I" .-{"-.
 I___|  ..| l______|l_ [__L]_[I_/r(=}=-P
[L______L_[________]______j~  '-=c_]/=-^
 \_I_j.--.==I|I==_/.--L_]
   [_((==)[`-----"](==)j
      I--I"~~"""~~"I--I
      |[]|         |[]|
      l__j         l__j
      |!!|         |!!|
      |..|         |..|
      ([])         ([])
      ]--[         ]--[
      [_L]         [_L]
     /|..|       /|..|
    `=}--{='     `=}--{='
   .-^--r-^-.   .-^--r-^-.
</pre>
  
</article>

CSS

@import "compass/css3";

$color-alpha: #000;

$list-alpha: 
  rgba(#fff, .5),
  #2ecc71, 
  #27ae60,
  #f1c40f,
  #f39c12,
  #3498db,
  #2980b9,
  #e74c3c,
  #c0392b,
  #9b59b6,
  #8e44ad, 
  #1abc9c,
  #16a085
;

$unit-alpha: length($list-alpha);
$unit-beta: .5s;
$unit-gamma: 100% / ($unit-alpha);

article {
  @extend %center;
}

.candybox2 {
  font-weight: bold;
  
  span {
    @for $i from 1 through $unit-alpha {
      &:nth-child(#{$unit-alpha}n+#{$i}) {
        @include animation(candy linear $unit-beta infinite forwards (-$unit-beta / $unit-alpha * $i));
      }
    }
  }
}

@include keyframes(candy) {
    @for $i from 1 through ($unit-alpha + 1) {
      #{$unit-gamma * ($i - 1)} {
        color: darken(nth($list-alpha, ($i % $unit-alpha) + 1), 15%);
        text-shadow: 
          .1em 0 .1em nth($list-alpha, ($i % $unit-alpha) + 1),
   .15em 0 .1em nth($list-alpha, ($i % $unit-alpha) + 1)
        ;
      }
    }
}

JS

/**
 *
 * AT-AT
 *
 * You should play with $unit-beta.
 *
 * "nth-letter"-something is provided by lettering.js
 * -> every letter is wrapped into a span!
 * http://letteringjs.com
 *
 *
 * 2013 by Tim Pietrusky
 * timpietrusky.com
 */


/* Lettering.JS 0.6.1 by Dave Rupert  - http://daverupert.com */
(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject=';if(a.length){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),','char',')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line',')})}};$.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if(method==='letters'||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);  


$(".candybox2").lettering();

Demo:

7. Pure CSS border animation

Đơn giản nhưng rất hiệu quả sử dụng border CSS để tạo ra một hình ảnh động load theo phong cách.

HTML(Pug)

.bb

CSS(Scss)

$anime-time: 8s;

$box-size: 200px;
$clip-distance: .05;
$clip-size: $box-size * (1 + $clip-distance * 2);
$path-awidth: 2px;

$main-color: #69ca62;

$codepen-logo-path: url('//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png');

%full-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bb {
  @extend %full-fill;
  awidth: $box-size;
  height: $box-size;
  margin: auto;
  background: $codepen-logo-path no-repeat 50% / 70% rgba(#000, .1);
  color: $main-color;
  box-shadow: inset 0 0 0 1px rgba($main-color, .5);

  &::before,
  &::after {
    @extend %full-fill;
    content: ';
    z-index: -1;
    margin: -1 * $clip-distance * 100%;
    box-shadow: inset 0 0 0 $path-awidth; 
    animation: clipMe $anime-time linear infinite;
  }

  &::before {
    animation-delay: $anime-time * -.5;
  }

  // for debug
  &:hover {
    &::after,
    &::before {
      background-color: rgba(#f00, .3);
    }
  }

}

@keyframes clipMe {
  0%, 100% {clip: rect(0px, $clip-size, $path-awidth, 0px); }
  25% {clip: rect(0px, $path-awidth, $clip-size, 0px); }
  50% {clip: rect($clip-size - $path-awidth, $clip-size, $clip-size, 0px); }
  75% {clip: rect(0px, $clip-size, $clip-size, $clip-size - $path-awidth); }
}

/////

html,
body {
  height: 100%;
}

body {
  position: relative;
  background-color: #0f222b;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

Demo:

8. SVG/CSS Loader

Bộ loader này sử dụng màu sắc thay đổi để tạo ấn tượng quay.

HTML

<div class="svg">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg" x="0px" y="0px" awidth="150px" height="150px" viewBox="0 0 213.235 241.176" enable-background="new 0 0 213.235 241.176" xml:space="preserve" fill="#0057B8">
    <path d="M108.581,64.968V14.124l44.007,25.422L108.581,64.968"/>
    <path fill-opacity="0.9" d="M153.591,92.101V41.258L109.582,66.68L153.591,92.101"/><path d="M155.586,92.062V41.221l44.009,25.42L155.586,92.062"/><path fill-opacity="0.7" d="M200.299,119.14V68.297l-44.004,25.421L200.299,119.14"/><path fill-opacity="0.85" d="M155.586,146.255V95.412l44.009,25.422L155.586,146.255"/><path fill-opacity="0.7" d="M200.299,173.35v-50.844l-44.004,25.422L200.299,173.35"/><path fill-opacity="0.6" d="M155.586,200.482v-50.84l44.009,25.417L155.586,200.482"/><path fill-opacity="0.5" d="M153.591,200.521v-50.84l-44.009,25.418L153.591,200.521"/><path fill-opacity="0.6" d="M108.581,227.696v-50.844l44.007,25.421L108.581,227.696"/><path fill-opacity="0.5" d="M106.62,227.696v-50.844l-44.005,25.421L106.62,227.696"/><path fill-opacity="0.7" d="M61.562,200.553V149.71l44.007,25.423L61.562,200.553"/><path fill-opacity="0.7" d="M59.709,200.56v-50.843l-44.008,25.422L59.709,200.56"/><path fill-opacity="0.7" d="M14.699,173.467v-50.843l44.01,25.42L14.699,173.467"/><path fill-opacity="0.5" d="M59.709,146.235V95.392l-44.008,25.42L59.709,146.235"/><path fill-opacity="0.7" d="M14.699,119.141V68.297l44.01,25.421L14.699,119.141"/><path fill-opacity="0.6" d="M59.709,92.101V41.258L15.701,66.68L59.709,92.101"/><path fill-opacity="0.85" d="M61.562,92.092V41.249l44.007,25.419L61.562,92.092"/>
    <path fill-opacity="0.9" d="M106.62,64.968V14.124L62.614,39.546L106.62,64.968"/>
  </svg>
</div>

CSS(Scss)

$pathNumber: 18;

// The color that will be at the beginning and the end of the loop.
$firstColor: #0057B8;

// The list of all the used colors. You can add or remove colors, the animation stays fluid. The $first-color must remain at the end of the list though.
$listColors: #F11E4A, #F8A527, #266D7F, #82A, $firstColor;

$delayCoeff: 0.1s; 

body {
  background-color: #0057B8;
  text-align: center;
  line-height: 100vh;
}

.svg {
  display: inline-block;
  height: 200px;
  awidth: 200px;
  line-height: 200px;
  text-align: center;
  background-color: #FFF;
  border-radius: 50%;
}

#svg {
  display: inline-block;
  vertical-align: middle;
  fill: $firstColor;
  
  @for $i from 1 through 18 {

      path:nth-child(#{$i}) {
        animation: pweek $delayCoeff*$pathNumber linear infinite;
        animation-delay: $i*$delayCoeff;
        
        &:hover {
          animation-play-state: paused;
          
        }
      }
   }
}

@keyframes pweek {
  0% {
    fill: $firstColor;
  }
  @for $i from 1 through length($listColors) {
    #{$i*(100/length($listColors))}% {
      fill: nth($listColors, $i);
    }
  }
}

Demo:

Kết luận:

Để hiểu rõ hơn về Animation, cách tốt nhất là bạn hãy thực hành các ví dụ đơn giản. Có rất nhiều tài liệu hướng dẫn cũng như ví dụ mà bạn có thể dễ dàng tìm thấy trên mạng. Hai link mà tôi khuyên bạn nên đọc là:

https://docs.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/animation-overview

https://www.codeproject.com/Articles/140623/WPF-Tutorial-Styles-Triggers-Animation

Tham khảo:

https://webdesign.tutsplus.com/tutorials