【週刊ドットインストール】 256timesのクラスを準備中、Ruby/Ruby on Railsのロードマップページを追加
.box{ width: 100px; height: 100px; background: orange; animation-name: move; animation-duration: 1s; animation-direction: alternate; } @keyframes move { 0% { transform: none; animation-timing-function: linear; } 80% { transform: translateX(200px) rotate(360deg); } 100% { transform: translateX(300px) rotate(360deg); } }
上記ではアニメーションが戻りませんでした。
animation-direction: alternate;はanimation-iteration-count: infinite; と一緒に使うことを前提にしていますか?
animation-direction: alternate;はanimation-iteration-count: infinite;
ドットインストールは、3分動画でマスターできるプログラミング学習サービスです。
3分で気軽に学習でき、スマートフォンからも視聴可能です。ホームページやWebサービスの制作を通して、実践的にプログラミングを学べます。
他にも、ゲーム制作やデータ分析・機械学習・AIに使われる言語まで幅広くカバー。学びたい分野のレッスンがきっと見つかります。
この回答を見るにはプレミアムプランへの登録が必要です
上記ではアニメーションが戻りませんでした。
animation-direction: alternate;はanimation-iteration-count: infinite;と一緒に使うことを前提にしていますか?