divタグにclass属性を指定し、pタグの animation を設定する。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【CSS】マーキーを実装する</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="marquee">
<p>今年度も頑張りましょう!</p>
</div>
</body>
</html>
style.css
@charset "utf-8";
.marquee {
width: 640px;
padding: 5px 0;
border: dotted 4px;
color: #0088ff;
overflow: hidden;
}
.marquee p {
display: inline-block;
margin: 0;
padding-left: 100%;
white-space: nowrap;
animation-name: marquee;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes marquee {
from {
transform: translate(0%);
}
to {
transform: translate(-100%);
}
}
この場合、pタグの文字が15秒周期で右から左へと流れていく。
