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

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

CSS animationでスイカがかわいく揺れるやつについて調べてみました。

More than 1 year has passed since last update.

以下のサイトの西瓜の揺れ方がよかったのでメモ。
http://iconmelon.com/ (もうサイト無くなってました。。
(1年半前ぐらいなぜか限定共有にいたので公開)

icemelon.gif


.swing {
        animation-name: swing;
        animation-duration: 2s;
        animation-delay: .45s;
}

@-webkit-keyframes swing {
    0%,100% { 
        -webkit-transform-origin: bottom center; 
    }
    10% { -webkit-transform: rotate(-15deg); }  
    20% { -webkit-transform: rotate(10deg); }
    30% { -webkit-transform: rotate(-5deg); }   
    40% { -webkit-transform: rotate(5deg); }    
    50% { -webkit-transform: rotate(-3deg); }

    60% { -webkit-transform: rotate(2deg); }
    70% { -webkit-transform: rotate(-2deg); }
    80% { -webkit-transform: rotate(1deg); }
    90% { -webkit-transform: rotate(-1deg); }
    100% { -webkit-transform: rotate(0deg); }
}

test

6
Help us understand the problem. What is going on with this article?
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
htomine
とみねです。cluster のPMをやっています。ex: Increments, サイボウズ, はてなアルバイター
cluster-inc
誰もがバーチャル上で音楽ライブ、カンファレンスなどのイベントに参加したり、友達と常設ワールドやゲームで遊ぶことのできる「バーチャルSNS」を展開しています。スマホやPC、VRといった好きなデバイスから数万人が同時に接続することができ、バーチャルで"集まる"体験を再定義し、全く新しいエンタメと熱狂体験を提供し続けています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
6
Help us understand the problem. What is going on with this article?