js/jqueryを使用しないキーフレームのアニメーションのトリック

js/jqueryを使用せずにキーフレームアニメーションをトリガーするオプションはありますか？私は考えました：ホバー、しかし、それは私の目的のために少し複雑になるでしょう。js/jqueryを使用しないキーフレームのアニメーションのトリック

出典

2016-04-02 Mat W

フルであなたの必要性は何ですか？あなたは '：ホバー'と思ったが、複雑になると言っている。なぜそれが複雑になると思いますか？いつアニメーションを実際にトリガする必要がありますか（ホバー、クリック、ロード時、いつ？）？あなたのコードはどこですか？ – Harry

コンテストに参加したいので、js/jqueryを使用することはできません。：ホバーは私の目的の中でのみ複雑になります。スクロールでjqueryとトリガのアニメーションを使用するのは簡単ですが、それができないときはsthの代替を見つけなければなりません。 –

私はJS/jQueryを使用できない理由を理解していますが、あなたの質問はかなり曖昧で、あなたの実際のニーズは不明です。私があなたのコメントを理解することは、ユーザーがスクロールしたときにアニメーションをトリガーし、それが正しければCSSが適切なツールではないことです。ユーザーがスクロールしたときを知る必要があるからです。 – Harry

このようなことを募集していますか？これは私がJavaScriptなしでできる最高です！私は楽しいことをしていましたが。

input[type=checkbox] { 
 
    opacity: 0; 
 
} 
 

 
input[type=checkbox] + label{ 
 
    width:100px; 
 
    height:40px; 
 
    border:thin solid black; 
 
    display:block; 
 
} 
 

 
input[type=checkbox] + label:before { 
 
    content: "Run Baby!"; 
 

 
} 
 
input[type=checkbox]:checked + label:before { 
 
    content: "Come back!"; 
 
} 
 
.run { 
 
    width: 150px; 
 
    line-height: 70px; 
 
    font-size: 12px; 
 
    border: thin solid red; 
 
    transition: all 5000ms ease; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 100px; 
 
} 
 
.run:before { 
 
    content: "I wanna go right ->"; 
 
} 
 
input[type=checkbox]:checked + label + .run { 
 
    left: 400px; 
 
} 
 
input[type=checkbox]:checked + label + .run:before { 
 
    content: "Hey! Look at me go!"; 
 
}

<input id="nice" type="checkbox"> 
 
<label for="nice"> 
 
</label> 
 

 
<div class="run"></div>

出典

2016-04-02 13:18:17 Roy

ありがとう:) –

js/jqueryを使用しないキーフレームのアニメーションのトリック

答えて

関連する問題