4

私は一連の「窓」または「わんわんドア」を作成しています。ホバーすると、わんわんドアのように「窓」に押し戻されるように見えます。

犬のドアが閉まる自然な効果を作り出すことができました。前後に数回スイングした後、デフォルトの位置に戻ります。

私の問題は、ホバーが離されたときにスイングをトリガーする方法を見つけられなかったことです。ここで実行され、キーフレームを使用する例を見たので、論理的な問題を知っています[ここ][2]。また、これを javascript で解決できることも知っていますが、このサイトでは CSS に厳密に固執しています。

アップデート：

これが実際の例です。フィドル

のび太さんありがとう！

HTML:

<ul class="window">
    <li>
        <figure class="door">
            <img src="http://www.ta-sa.org/data/images/laughing_man_big_2.png" alt="">
        </figure>
    </li>
</ul>

CSS:

* {
    list-style: none;



}
.door {
    width: 300px;
    height: 300px;
    margin: 0;
    position: relative;
    perspective:1000px;
    -webkit-perspective:1000px;
    /* Safari and Chrome */
}
.door img {
    background-color: #E8585A;
    width: 100%;
    display: block;
    position: relative;
    transform-origin: top;
    -ms-transform-origin: top;
    /* IE 9 */
    -webkit-transform-origin: top;
    /* Safari and Chrome */
    -moz-animation: swing 2s;
    -webkit-animation: swing 2s;
    animation: swing 2s;
    z-index: 10;
}

.door:hover img {
      transform-origin: top;
    -webkit-transform-origin: top;
    -webkit-transform: rotateX(-60deg);
    -webkit-transition: all .2s;
    background-color: #00a99d;
    -webkit-animation: swing;
    /* Safari and Chrome */
}
@-webkit-keyframes swing {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transform-origin: top center;
    }
    0% {
        -webkit-transform: rotateX(-60deg);
    }
    20% {
        -webkit-transform: rotateX(-60deg);
    }
    40% {
        -webkit-transform: rotateX(25deg);
    }
    60% {
        -webkit-transform: rotateX(-20deg);
    }
    80% {
        -webkit-transform: rotateX(5deg);
    }
    100% {
        -webkit-transform: rotateX(0deg);
    }
}
4

2 に答える 2

5

素晴らしいテクニックです。div から離れたときにアニメーションをトリガーできるとは知りませんでした。私は少しいじり、期待したほどスムーズではなくてもうまくいくことを願っていますが、正しい方向にさらに一歩進むにはおそらく十分です.

ここでの問題は、(リンクで提案されているように) ホバー状態でアニメーションを宣言しているのではなく、単なる遷移であることだと思います。そこで、「ドア」がホバー時に開くトランジションを追加してみました...

.door:hover img {
  transform-origin: top;
  transform: rotateX(-60deg);
  transition: all .2s;

...そして、マウスアウトで起動するアニメーション:

   animation: swing;
 }

このフィドルが必要なものを示しているか、少なくとも何らかの形で役立つことを願っています。とにかく、何か新しいことを学べてとてもうれしいです、ありがとう。

* {
    list-style: none;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
 
}
*:hover {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.door {
    width: 300px;
    height: 300px;
    margin: 0;
    position: relative;
    perspective:1000px;
    -webkit-perspective:1000px;
    /* Safari and Chrome */
}
.door img {
    background-color: #E8585A;
    width: 100%;
    display: block;
    position: relative;
    transform-origin: top;
    -ms-transform-origin: top;
    /* IE 9 */
    -webkit-transform-origin: top;
    /* Safari and Chrome */
    -moz-animation: swing 2s;
    -webkit-animation: swing 2s;
    animation: swing 2s;
    z-index: 10;
}

.door:hover img {
      transform-origin: top;
    -webkit-transform-origin: top;
    -webkit-transform: rotateX(-60deg);
    -webkit-transition: all .2s;
    background-color: #00a99d;
    -webkit-animation: swing;
    /* Safari and Chrome */
}
@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% {
        -webkit-transform-origin: top center;
    }
    20% {
        -webkit-transform: rotateX(-60deg);
    }
    40% {
        -webkit-transform: rotateX(25deg);
    }
    60% {
        -webkit-transform: rotateX(-20deg);
    }
    80% {
        -webkit-transform: rotateX(5deg);
    }
    100% {
        -webkit-transform: rotateX(0deg);
    }
}
<ul class="window">
    <li>
        <figure class="door">
            <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="">
        </figure>
    </li>
</ul>

于 2013-07-25T01:53:59.200 に答える
2

次のように:not 疑似クラスを使用して、Firefox v22 で動作するようにしました。

実施例

.door img:not(:hover) {
    transform-origin: top;
    animation: swing 2s;
}

この疑似クラスの組み合わせは悪いハックのように見えますが、うまくいきます。

アニメーションには、-webkit- ブラウザー用の作業がまだ必要です...

于 2013-07-25T02:33:07.637 に答える