CSSアニメ応用例

より実践的なCSSアニメーションがまとまってるが、属性がちょっと複雑。⇒ Effeckt.css

お遊び的なCSSエフェクトがいっぱい。⇒ 150+ Examples

標準マーキー

流れる文字が　流れてゆくよ～

親ボックスの幅を変えて確認！流れる文字が　流れてゆくよ～


//サイズは親要素の大きさに依存

縦マーキー

親ボックスの幅を変えて確認！
流れる文字が　流れてゆくよ
ダミーテキストです。
文字の大きさや形、色をご確認ください。テキストはOSやブラウザによってフォントが変わります。
このようにスマホ・パソコンに依存した文字になります。

  
  //高さはstyleで直に指定
  
  ここに文章。
改行OK。
  

  //CSS
  .marqueeX {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  overflow: hidden;
  }
  .marqueeX p {
  margin:0;
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  line-height: 1em;
  animation: marqueex 20s linear infinite;
  }

  .marqueeX p:hover {
    animation-play-state: paused;
    cursor: default;
  }

  @keyframes marqueex{
  0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
  }

  .marqueeY {
  margin: 0 auto;
  width: 100%;
  height: 1.5em;
  overflow : hidden;
  }

  .marqueeY p {
  display : inline-block;
  line-height : 1.5em;
  animation : marqueeY 8s linear infinite;
  }

  @keyframes marqueeY {
  0% { transform: translateY(0)}
  100% { transform: translateY(-100%)}
  }