画像をcss-animationで回転移動させたい

CSS

CSSここに言語を入力
1.cls-c{
2    display: inline-block;
3    opacity: 0;    
4　　animation:withcat-c-rotate 5s linear 0s 1 normal,withcat-c-translate 5s linear 0s 1 forwards normal;
5}
6@keyframes withcat-c-translate{
7    0% {
8        transform: translateX(-200px);
9        opacity: 0;
10    }
11    100% {
12        opacity: 1;
13        transform: translateX(0);
14    }
15}
16@keyframes withcat-c-rotate{
17    0% {
18        transform: rotate(0deg);
19        transform-origin: 70% 50%;
20        
21        opacity: 1;
22    }
23    100% {
24        transform: rotate(360deg);
25        transform-origin: 70% 50%;
26        
27        opacity: 1;
28    }
29}


クラス名cls-cに回転移動をさせたいです。
上にあるようなコードを書いてみましたがブラウザで表示させたら左(-200px)から移動するだけで回転はしてくれませんでした。
どうすればよいでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

アニメーションを複数設定したいという場合は、カンマで区切るというのはいいのですが、同じプロパティに対して設定したら後からのもので上書きされます。

質問の２つの@keyframesはどちらも、transform と opacity に対して設定していますので、後の@keyframes のみが有効になります。

もし、移動(translateX)と回転(rotate)のアニメーションを同時に行いたいなら、@keyframes の方でまとめて設定すればいいでしょう。

css
1.cls-c{
2    font-size: 20px;
3    display: inline-block;
4    opacity: 0;    
5    animation: withcat-c-rotate 5s linear 0s 1 forwards normal;
6}
7
8@keyframes withcat-c-rotate{
9    0% {
10        transform: translateX(-200px) rotate(0deg);
11        transform-origin: 70% 50%;
12        opacity: 0;
13    }
14    100% {
15        transform:  translateX(0) rotate(360deg);
16        transform-origin: 70% 50%;
17        opacity: 1;
18    }
19}

投稿2021/10/07 00:47

hatena19

総合スコア33795

CSS アニメーションにあまり詳しくはないですが試したら動作したので参考まで。
animation-name に「,」区切りで名前を指定すると、複数アニメーションを同時に適用することができるようです。

css
1.cls-c {
2    display: inline-block;
3    opacity: 0;    
4/*
5    animation:withcat-c-rotate 5s linear 0s 1 normal,withcat-c-translate 5s linear 0s 1 forwards normal;
6*/
7    animation-duration: 5s;
8    animation-name: withcat-c-translate, withcat-c-rotate;
9}