JsクリックでCss 3をトリガするアニメーションAnimations、遷移Transitions効果
5258 ワード
まずアニメーション効果のCSS属性名を指定し、Jsでこの属性を変更することが重要です.
Jsトリガを使用しない場合は、cssの状態:hover,focus,activeでトリガするか、最初からトリガするかを選択できます.
次の例では、Jsクリックで遷移Transitions効果をトリガーします.指定した属性名はwidthです.
オリジナルの文章、転載を歓迎して、転載して出典を明記してください!
Jsトリガを使用しない場合は、cssの状態:hover,focus,activeでトリガするか、最初からトリガするかを選択できます.
次の例では、Jsクリックで遷移Transitions効果をトリガーします.指定した属性名はwidthです.
DOCTYPE html>
<html>
<head>
<style>
#aaa {
width: 100px;
height: 100px;
background: blue;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
style>
<script>
function big() {
document.getElementById("aaa").style.width = "300px";
}
function small() {
document.getElementById("aaa").style.width = "100px";
}
script>
head>
<body>
<button onclick="big()">Bigbutton>
<button onclick="small()">Smallbutton>
<div id="aaa">div>
body>
html>オリジナルの文章、転載を歓迎して、転載して出典を明記してください!