[装飾系]アニメーション 映画のエンドロールのように文字を流すアニメーション

CSS HTML
 2018.10.02

映画のエンドロールのように文字を流すアニメーション

映画のエンドロールのように文字を流すアニメーションです。

browser:  65 11 20 10 
ニャン易度 
En duva satt pa en gren och funderade pa tillvaron
directed by
Roy Andersson
Produce by
Pernilla Sandstrom


<div class="cp_cont">
<div class="cp_anime14">
	<div class="text1">En duva satt pa en gren och funderade pa tillvaron</div>
	<div class="text2">directed by</div>
	<div class="text3">Roy Andersson</div>
	<div class="text2">Produce by</div>
	<div class="text3">Pernilla Sandstrom</div>
	<div class="text2">・<br />・<br />・</div>
</div>
</div>
.cp_cont {
	text-align: center;
	overflow: hidden;
	position: relative;
	margin: 2em auto;
	width: 100%;
	height: 340px;
	background:#eeeeee;
	}
.cp_anime14 {
	position: relative;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-animation: anime14_text 60s linear infinite;
	        animation: anime14_text 60s linear infinite;
	text-align: center;
	color: #616161;
}
.cp_anime14 .text1 {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 50px;
}
.cp_anime14 .text2 {
	font-size: 1em;
	margin-bottom: 5px;
}
.cp_anime14 .text3 {
	font-size: 1.4em;
	margin-bottom: 50px;
}
@-webkit-keyframes anime14_text {
	0%   { top: 100%; }
	100% { top: -200%; }
}
@keyframes anime14_text {
	0%   { top: 100%; }
	100% { top: -200%; }
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?