今回は、CSSのみで行うアニメーション効果をご紹介いたします


1.background-clip

背景画像を横に移動させる

テキスト上に画像を載せて画像のみ移動させるプロパティです。
background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。

SAMPLE TEXT
   

.sample_text h1{
	-webkit-animation: scrollmask 15s ease 2s infinite;
	-webkit-background-clip: text;
	background-image: url(背景画像.png);
	color: transparent;
	font-size: 100px;
	padding-top: 50px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
}
@-webkit-keyframes scrollmask {
  0% {background-position: 0 0;}
  100% {background-position: 100% 0;}
} 

～入れたいワード～
～入れたいワード～
～入れたいワード～
～入れたいワード～

  

.starwars-box {
	perspective: 200px;
	-webkit-perspective: 150px;
	height: 200px;
	background-color: #FFF;
	overflow: hidden;
}
.starwars-content {
	text-align: justify;
	padding: 5%;
	-webkit-animation: typetext linear 30s infinite;
	color: #666;
	letter-spacing: 5px;
	font-size: 30px;
}

@-webkit-keyframes typetext {
   0% {transform: rotateX(60deg) translate(0,0);}
  100% {transform: rotateX(60deg) translate(0,-500px);}
}