<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テキストティッカー</title>
<style>
*{
margin: 0;
padding: 0;
line-height: 1.0;
}
ul{
list-style: none;
text-align: center;
height: 50px;
overflow: hidden;
margin-top: 100px;
}
li{
font-size: 38px;
padding: 6px 0;
animation: ticker 5s forwards infinite;
}
@keyframes ticker{
0%{transform: translateY(0);opacity: 1;}
40%{transform: translateY(0);opacity: 1;}
41%{transform: translateY(0);opacity: 0;}
49%{transform: translateY(-40px);opacity: 0;}
50%{transform: translateY(-40px);opacity: 1;}
90%{transform: translateY(-40px);opacity: 1;}
91%{transform: translateY(-40px);opacity: 0;}
100%{transform: translateY(0);opacity: 0;}
}
</style>
</head>
<body>
<ul>
<li>ふるさと納税</li>
<li>今ならポイント5倍</li>
</ul>
</body>
</html>
