また、css3アニメーションでx軸上にアニメーションが必要です

私はボウルがy軸上でバウンドする単純なプログラムを作っていますが、x軸上で動かす方法もわかりません。 x軸変換の値を0から正または負の値に変更すると、ボールドが消えます。助けてください！また、css3アニメーションでx軸上にアニメーションが必要です


 

 
<html> 
 
<head> 
 
\t <title>bounce</title> 
 
\t <style> 
 
\t \t *{margin: 0 auto;} 
 
\t \t div 
 
\t \t { 
 
\t \t \t width: 200px; 
 
\t \t \t height: 200px; 
 
\t \t \t background-color: #FFDEAD; 
 
\t \t \t border-radius: 100%; 
 
\t \t \t border:5px solid black; 
 
\t \t \t margin-top: -250px; 
 
\t \t \t animation:bounce 2s linear forwards; 
 
\t \t } 
 
\t \t p{ 
 
\t \t \t text-align: center; 
 
\t \t \t margin-top:46%; 
 
\t \t } 
 
\t \t @keyframes bounce 
 
\t \t { 
 
\t \t \t 0%{transform:translate(0,-250px);} 
 
\t \t \t 20%{transform:translate(0,450px);} 
 
\t \t \t 40%{transform:translate(0,330px);} 
 
\t \t \t 50%{transform:translate(0,450px);} 
 
\t \t \t 65%{transform:translate(0,370px);} 
 
\t \t \t 75%{transform:translate(0,450px);} 
 
\t \t \t 90%{transform:translate(0,400px);} 
 
\t \t \t 100%{transform:translate(0,450px);} 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <div><p>this is a div</p></div> 
 
</body> 
 
</html>

出典

2017-05-11 Harley Quinn

あなたはそれを使用することができ、明らかにあなたは、パラメータについて知っておくべきキーフレーム属性のこの行はkeyframes descriptionです。使用可能な答えを

*{ 
 
    margin: 0 auto; 
 
} 
 
div 
 
{ 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #FFDEAD; 
 
    border-radius: 100%; 
 
    border:5px solid black; 
 
    margin-top: -250px; 
 
    animation:bounce 2s linear forwards; 
 
} 
 
p{ 
 
    text-align: center; 
 
    margin-top:46%; 
 
} 
 
@keyframes bounce 
 
{ 
 
    0%{transform:translate(0px,-250px);} 
 
    20%{transform:translate(50px,450px);} 
 
    40%{transform:translate(100px,330px);} 
 
    65%{transform:translate(200px,330px);} 
 
    78%{transform:translate(-150px,330px);} 
 
    90%{transform:translate(200px,330px);} 
 
    100%{transform:translate(-20px,330px);} 
 
}

<div><p>this is a div</p></div>

出典

2017-05-11 17:41:47 orbit

使用翻訳（TX）または翻訳（TX、TY）

*{ 
 
    margin: 0 auto; 
 
} 
 
div 
 
{ 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #FFDEAD; 
 
    border-radius: 100%; 
 
    border:5px solid black; 
 
    margin-top: -250px; 
 
    animation:bounce 2s linear forwards; 
 
} 
 
p{ 
 
    text-align: center; 
 
    margin-top:46%; 
 
} 
 
@keyframes bounce 
 
{ 
 
    0%{transform:translate(0px,-250px);} 
 
    20%{transform:translate(50px,450px);} 
 
    40%{transform:translate(100px,330px);} 
 
    50%{transform:translate(150px,450px);} 
 
    65%{transform:translate(200px,370px);} 
 
    75%{transform:translate(250px,450px);} 
 
    90%{transform:translate(300px,400px);} 
 
    100%{transform:translate(350px,450px);} 
 
}

<div><p>this is a div</p></div>

出典

2017-05-11 17:18:17 XYZ

感謝.. –

@Harley答えは参考になりました場合は受け入れる/ upvoteしてください – XYZ

また、css3アニメーションでx軸上にアニメーションが必要です

答えて

関連する問題