Animation Test 
<html>
  <head>
    <style>
      #Twice-Logo:hover {
  animation-name: rotating;
  animation-duration: 1s;
}
      #Twice-Members {
  animation-iteration-count: infinite;
      }

      #highlighter:hover {
        background-color: #fdb3a5;
        width: 0;
        animation-name: highlighting;
        animation-duration: 20s;
        animation-timing-function: steps(10,end)
        /*NEED: GRADUAL HIGHLIGHTING*/
      }
      
@keyframes floating {
  from { margin-top: 0% }
  50% { margin-top: 2.5% }
  to { margin-top: 0% }
}
      
@keyframes rotating {
  from {
    transform: rotate(0deg);
    height: 0%; /*no entiendo por qué no funciona...*/
  }
  50% {
    transform: rotate(360deg);
    height: 20%;
  }
  to {
    transform: rotate(0deg);
    height: 10%;
  }
}

@keyframes highlighting {
        0% {width:0%}
        50% {width:50%}
        100% {width:100%}
      }
    </style>
  </head>
  
  <body>
    <img id="Twice-Logo" src="https://images.gamebanana.com/img/ico/sprays/5caf52c9bfcf8.png">
    <p font-size:20px><b id="higlighter">트와이스</b>입니다!</p>
  </body>
</html>
/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */

Animation Test

By 남원채
  • Files
  • Index
  • Style
  • Script
  • README
  • CDN Add
HTML
PLEASE WAIT...