Contoh Konsep Animasi

Berikut adalah Contoh Sebuah Konsep Animasi bentuk Elemen Gerak yang dapat dihasilkan dari konsep Properti Keyframe

ROTASI BLINK COLOR

<style type="text/css">
#color-blink {
  background:black;
  text-align:center;
  padding:10px;
  height:80px;
  width:80px;
  border-radius:50%;
  position:absolute;
  top:calc(50% - 40px);
  left:calc(50% - 40px);
  box-shadow:
    178px 0 0 -25px black,
    178px 0 0 -20px red,
    -178px 0 0 -25px black,
    -178px 0 0 -20px red,
    0 0 0 20px black,
    0 0 0 30px red,
    0 0 0 130px black,
    0 0 0 135px red;
  -moz-animation: rotate 3s linear infinite;
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;}
#color-blink:before {
  content: " ";
  position: absolute;
  height:50px;
  width:50px;
  border-radius:50%;
  top: -155px;
  left: 20px;
  background:black;
  border: 5px solid #00FF7F;
  box-shadow:
    0 355px 0 -5px black,
    0 355px 0 0px #00FF7F;
  -moz-animation: reverseRotate 3s linear infinite;
  -webkit-animation: reverseRotate 3s linear infinite;
  animation: reverseRotate 3s linear infinite;}
#color-blink:after {
  content: " ";
  position: absolute;
  height:280px;
  width:280px;
  left:-90px;
  top:-90px;
  background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
  background-repeat: no-repeat;
  z-index:2;
  -moz-animation: segmentRotate 300s linear infinite;
  -webkit-animation: segmentRotate 300s linear infinite;
  animation: segmentRotate 300s linear infinite;}
@keyframes rotate {
  0%   { transform: rotate(  0deg); }
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  {
    background: black;
    box-shadow:
      178px 0 0 -25px black,
      178px 0 0 -20px #40E0D0,
      -178px 0 0 -25px black,
      -178px 0 0 -20px #40E0D0,
      0 0 0 20px black,
      0 0 0 30px #40E0D0,
      0 0 0 130px black,
      0 0 0 135px #40E0D0;}
  12.5%, 37.5%, 62.5%, 87.5% {
    background: #FFFF00;
    box-shadow:
      178px 0 0 -25px #39f,
      178px 0 0 -20px #39f,
      -178px 0 0 -25px #39f,
      -178px 0 0 -20px #39f,
      0 0 0 20px black,
      0 0 0 30px #39f,
      0 0 0 130px black,
      0 0 0 135px #39f;}
  100% { transform: rotate(360deg); }}
@keyframes reverseRotate {
  0%   { transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  {
    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px magenta; }
  12.5%, 37.5%, 62.5%, 87.5% {
    background: magenta; box-shadow: 0 355px 0 -5px magenta, 0 355px 0 0px magenta; }
  100% { transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }}
@keyframes segmentRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-32000deg); }}
</style>
<div id='color-blink'>
MENGGALIILMU
</div>