WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

文字を左からフェードで表示

デモ
http://efu.sakura.ne.jp/web/fade/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フェードアニメーション</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <h1>Sacramento</h1>
</body>
</html>
body {
  text-align: center;
}

h1 {
  position: relative;
  display: inline-block;
  margin: 200px 0;
  font-size: 100px;
  font-family: 'Sacramento', cursive;
  color: #333;
}

h1:before {
  content: "";
  position: absolute;
  top: -10%;
  left: -100%;
  width: 270%;
  height: 120%;
  background: #fff;
  background: -moz-linear-gradient(center left, transparent, #fff 25%, #fff 50%, #fff 75%, transparent);
  background: -webkit-gradient(linear, 0% 50%, 100% 50%, from(transparent), color-stop(0.25, rgb(255, 255, 255)), color-stop(0.5, rgb(255, 255, 255)), color-stop(0.75, rgb(255, 255, 255)), to(transparent));
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

h1.active:before {
  left: 100%;
}
$(function(){
  setTimeout( function(){
    $('h1').addClass('active');
  }, 400);
});

linear-gradientでグラデーションを作ったものを上に被せて
横にアニメーションさせる。