Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
86
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@skwbr

CSSアニメーションでゆらゆらさせる

サンプル

http://codepen.io/skwbr/full/JdJWqV
(※横着してwebkitプレフィックスしかつけていないのでChromeからどうぞ...)

解説

フワフワというかゆらゆらというか宙に浮いているようなアニメーションをさせる場合。

<ul>
<li><a href="#"><img src="hogera.png"></a></li>
<li><a href="#"><img src="hogera.png"></a></li>
<li><a href="#"><img src="hogera.png"></a></li>
</ul>

みたいな場合を考えるとき

@keyframes horizontal {
    0% { transform:translateX( -3px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-10px); }
  100% { transform:translateY(  0px); }
}

みたいに左右に揺れるアニメーションと、上下に揺れるアニメーションを各々定義しておいて、例えばliには前者、その中のaには後者を当てるなどして、平面上を上下左右にゆらゆらしているように見せる。

li {
  animation: horizontal 1s ease-in-out infinite alternate;
}

li a {
  animation: vertical 1s ease-in-out infinite alternate;
}

また複数のものがランダムにバラバラに動いているように見せたいときは、
単純にアニメーションの種類を増やしたり、

li:nth-child(1) { animation-duration: 1.1s}
li:nth-child(2) { animation-duration: 1.3s}
li:nth-child(3) { animation-duration: 1.5s}

のように animation-duration (アニメーションにかける尺)をキリの悪いバラバラ指定にするとランダム感が増す。

(※ベンダープレフィックスは心のなかで補ってください)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
86
Help us understand the problem. What is going on with this article?