Всем привет. Хочу сегодня поделиться очень интересными возможностями, которые можно реализовать на чистом css. В частности, как сделать в css анимацию картинки в зависимости от выбора человека. Например, ему нужно с помощью чекбоксов или радиокнопок выбрать какой-то вариант и для каждого варианта нужно проиграть свою анимацию. Сегодня я вам покажу, как можно это сделать достаточно легко за счет css-селекторов.
Знакомимся с примером. Базовая разметка
Итак, я решил, что у меня опять будет пример с футболом. Вот что мы с вами сегодня реализуем. У нас будут два футбольных мяча и ворота. Также мы сделаем две радиокнопки. В зависимости от того, на какую кнопку вы нажмете, будет забит первый или второй мяч. Подойдет такой пример? Тогда начнем.
Вот такая у меня пока разметка:
<div class = "goal"></div>
<div class = "ball"></div>
<div class = "ball2"></div>
Соответственно, это будут ворота и два мяча. Картинки я задам через css фоном:
.ball{
background: url(ball.png) no-repeat;
width: 80px;
height: 80px;
transform: translateY(50px);
}
.ball2{
background: url(ball.png) no-repeat;
width: 80px;
height: 80px;
transform: translate(300px, 10px);
}
.goal{
background: url(vorota.png) no-repeat;
background-size: cover;
width: 400px;
height: 240px;
z-index: -1;
}
С помощью трансформации я немного отодвинул мячи вниз, чтобы наши удары были более амплитудными.
Вот что у нас уже получается:
Теперь нужно создать анимацию, которая бы посылала мячи в ворота их передвижением. Можно заморочиться и для каждого мяча сделать свою траекторию, но я этого делать не буду, пропишу то, что подойдет обоим мячам. Например, такое перемещение:
@keyframes ball{
100%{transform: translate(210px, -200px)}
}
Создаем кнопки и реализуем анимацию при нажатии на них
Как я уже сказал, создадим две радиокнопки.
Выберите, какой мяч забить в ворота:<br>
Слева<input type = "radio" name = "ball" id = "radioball">
Справа<input type = "radio" name = "ball" id = "radioball2">
Их нужно поместить в разметке ПЕРЕД нашими воротами и мячами. Это обязательно! Остается применить анимацию при нажатии на любую из кнопок. Это делается с помощью вот таких волшебных селекторов:
#radioball:checked ~ .ball{
animation-name: ball;
animation-duration: 3s;
}
#radioball2:checked ~ .ball2{
animation-name: ball;
animation-duration: 3s;
}
Тут мы даем браузеру такую команду: если радио кнопка активна (то есть вы на нее нажали), то к мячу, который в разметке обязательно должен находиться после радиокнопки, применятся указанные в фигурных скобках стили. Ну а в стилях мы уже прописываем анимацию и ее длительность.
Ну что, интересно узнать, как все это дело работает? А вот так:
Посмотреть демонстрацию примера (откроется в новом окне).
Вот такая статья, мало слов, но прием разобрали интересный 
Интересная функция.
Кстати видел ещё на некоторых сайтах вот такую анимацию: когда наводишь мышкой на картинку, картинка слегка поворачивается по часовой стрелке — это здорово привлекает внимание