자세히 보기 간단한 css animation tips[초보자용]

3226 단어 HTMLCSSCSS3animation
<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>

./어세 ts/cs/pc. cs
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%;
 }
}

결과



좋은 웹페이지 즐겨찾기