CSS 3 animationアニメーション+アニメーションの切り替え方法
7447 ワード
前にターンテーブルを作るときに、animationを使って、@keyframesをつけました.その时、时間が緊張していたので、ネットで使い方を探して、そのまま使いました.今は時間があるので、具体的な使い方をよく見てみました.
-『図解CSS 3』CSS 3のanimation属性は、Flashがアニメーションを作成するように、キーフレームによってアニメーションの一歩一歩を制御することで、複雑なアニメーション効果を実現することができる.
属性:
animation-name:@keyframesキーフレームの名前を指定animation-duration:アニメーションの再生に要する時間を設定します.一般的には秒単位でanimation-timing-function:アニメーションの再生方法を設定ease|linear|ease-in|ease-out|ease-in-out animation-delay:アニメーションの再生開始時間、すなわちアニメーションの開始前に待つ時間ainimation-iteration-count:アニメーションの再生回数、デフォルトは1で、値がinfiniteの場合、無限ループanimation-direction:アニメーション再生方向animation-play-state:再生状態を制御し、running|paused animation-fill-mode:アニメーション開始前と終了後に発生する操作.None|forwards(最後のキーフレームを適用するスタイル)|backwards(初期フレーム)|both
今日、ページに回転する要素がある場合は、この要素をクリックして回転を停止し、もう一度クリックして、要素を再回転します.
私が前に書いたコードは次のとおりです.
CSSコード:
しかし、このように書くのは役に立たない.なぜなら、「」空の文字列は認識されない可能性があるからだ.もっと良い方法は、スタイルを再設定して、回転させてこのスタイルを追加することです.そうしないと、このスタイルを削除します.
jsコードは以下の通りです.
-『図解CSS 3』CSS 3のanimation属性は、Flashがアニメーションを作成するように、キーフレームによってアニメーションの一歩一歩を制御することで、複雑なアニメーション効果を実現することができる.
属性:
animation-name:@keyframesキーフレームの名前を指定animation-duration:アニメーションの再生に要する時間を設定します.一般的には秒単位でanimation-timing-function:アニメーションの再生方法を設定ease|linear|ease-in|ease-out|ease-in-out animation-delay:アニメーションの再生開始時間、すなわちアニメーションの開始前に待つ時間ainimation-iteration-count:アニメーションの再生回数、デフォルトは1で、値がinfiniteの場合、無限ループanimation-direction:アニメーション再生方向animation-play-state:再生状態を制御し、running|paused animation-fill-mode:アニメーション開始前と終了後に発生する操作.None|forwards(最後のキーフレームを適用するスタイル)|backwards(初期フレーム)|both
今日、ページに回転する要素がある場合は、この要素をクリックして回転を停止し、もう一度クリックして、要素を再回転します.
私が前に書いたコードは次のとおりです.
<html>
<head>
<title> title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
head>
<body>
<div class="container">
<div id="top">
div>
div>
<script type="text/javascript">
// CSS
var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};
var musicIcon = document.getElementById("top"); //
musicIcon.addEventListener("click",function(){//
var rotate = getCss(musicIcon,"animation");// CSS animation
if (rotate) { // ，
musicIcon.style.animation = " ";
}else{
musicIcon.style.animation = "200s one infinite linear";
}
,false);
script>
body>
html>CSSコード:
#top{
width: 86px;
height: 86px;
border-radius: 43px;
border: 1px solid red;
background: url(../images/icon.png) no-repeat;
animation: 200s one infinite linear;
}
@keyframes one {
100% {transform: rotate(36000deg);}
}しかし、このように書くのは役に立たない.なぜなら、「」空の文字列は認識されない可能性があるからだ.もっと良い方法は、スタイルを再設定して、回転させてこのスタイルを追加することです.そうしないと、このスタイルを削除します.
jsコードは以下の通りです.
<script type="text/javascript">
// CSS
var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};
var musicIcon = document.getElementById("top");
musicIcon.addEventListener("click",function(){
if (musicIcon.className.indexOf("rotate") >= 0) {
musicIcon.className = "";
}
else {
musicIcon.className = "rotate";
}// ， ， ，
},false);
script>