アニメーション

CSS3アニメーション

マーキー

  • 左右や上下にスクロールする文字や画像を表示します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>基本のマーキー</title>
<link rel="stylesheet" href="style.css" media="only screen and (max-width:480px)">
<style>
#mq {
	overflow:-webkit-marquee;
}
</style>
</head>
<body>
<p id="mq">4月20日まで期間限定セール実施中！</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>幅から文字がはみ出すマーキー</title>
<link href="style.css" rel="stylesheet" media="only screen and (max-width:480px)">
<style>
#mq {
	overflow:-webkit-marquee;
	white-space:nowrap;
	width:100%;
}
</style>
</head>
<body>
<p id="mq">4月20日まで期間限定セール実施中！2000円以上お買い上げのお客様に、もれなく粗品プレゼント！</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>角度を変更した要素のマーキー</title>
<link rel="stylesheet" href="style.css" media="only screen and (max-width:480px)">
<style>
#mq {
  overflow:-webkit-marquee;
  -webkit-transform:rotate(45deg);
  width:50%;
  white-space:nowrap;
  position:absolute;
  top:0.5em;
  right:-2.5em;
}
</style>
</head>
<body>
<p id="mq">4月20日まで期間限定セール実施中！</p>
</body>
</html>

@charset "UTF-8";
/*マーキーアニメ用のp要素へのスタイル*/
#mq {
  background-color:#903;
  background-image:-webkit-gradient(linear, left top, right top, from(#903), to(#903),color-stop(0.4,#F00),color-stop(0.6,#F00));
  color:#FFF;
  border:inset #999 1px;
  padding:3px 0;
}

水平移動（連続移動背景）

  • 画像の横幅が移動するために要する時間を設定する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>無限背景</title>
<style>
body {
  background-image:url(images/bg.jpg);
  background-repeat:repeat-x;
  -webkit-animation: bck_move 240s linear 0 infinite;
}
@-webkit-keyframes bck_move {
  from { background-position-x:left; }
  to { background-position-x:2753px; }
}
</style>
</head>
<body>
</body>
</html>