More than 5 years have passed since last update.

よく見る簡単な css animation tips[初心者向け]

HTML
CSS
CSS3
animation

Last updated at 2018-08-06Posted at 2018-07-22

<html>
 <head>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="./assets/css/pc.css">
 </head>
 <body>
  <p class="label"><span>ラベルが入ります。</span></p>
 </body>
</html>

../assets/css/pc.css

span {
 position: relative;
 display: inline-block;
}

span:before {
 content: '';
 position: absolute;
 background-color: black;
 animation: revealLTR 1s ease;
 height: 100%;
}

@keyframes revealLTR {
 0%{
  width: 0;
  left: 0;
 }
 65%{
  width: 100%;
  left: 0;
 }
 100% {
  width: 0;
  left: 100%;
 }
}

結果

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up