css詳しい人来てください！！！！

1 ：以下、＼(^o^)／でVIPがお送りします：2016/05/08(日) 02:11:08.849 ID:ArMJEG6A0.net

cssで複数の要素にアニメーションを付けたい

#test:hover{
animation: slide 1s forwards;
}
@keyframes slide{
0%{left:0px}
100%{left:200px}
}

上のように@keyframesを使って#testへのマウスオーバーで#testの要素を動かすのは分かるんだが、
同時に#test2の色を変えたいって場合どうすればいいの？

2 ：以下、＼(^o^)／でVIPがお送りします：2016/05/08(日) 02:12:00.170 ID:IAm9Zy8ap.net

知ってるが態度が気に入らない

3 ：以下、＼(^o^)／でVIPがお送りします：2016/05/08(日) 02:12:02.025 ID:PcdbUXLB0.net

レスしようと思ったらCSS忘れて草はえた

4 ：以下、＼(^o^)／でVIPがお送りします：2016/05/08(日) 02:14:14.681 ID:ArMJEG6A0.net

あげ

5 ：以下、＼(^o^)／でVIPがお送りします：2016/05/08(日) 02:17:25.063 ID:RNquaFg20.net

アニメーション２つならたぶんやったことあるけど
悩まなかった気がするわ
普通にもう１つ書けばいいんじゃないっけか

6 ：以下、＼(^o^)／でVIPがお送りします：2016/05/08(日) 02:22:07.716 ID:ArMJEG6A0.net

>>5
@keyframes slide{
0%{left:0px; top:0px}
100%{left:200px; top:500px;}
}

のように#testのプロパティを複数変える事はできる
これと同時に別の要素#test2を動かしたいんだけど分かる？

7 ：以下、＼(^o^)／でVIPがお送りします：2016/05/08(日) 02:23:35.994 ID:1tUpKXiO0.net

この程度のアニメーションにキーフレーム使うと処理に無駄が出る
transitionを使え

あと同時に動作させるのをcssだけでやるのは現実的じゃないからjQuery使え
それでもcssでやりたいならチェックボックス使ってフラグ操作しろ