Что из этого невозможно создать на css?

Question

[Bongie]

1. Анимация по клику (первому и второму) (Click/tap)
   
2. Анимация при наведении (Hover)
   
3. Анимация при движении курсора поверх элемента (Mouse move over element)
   
4. Появление/исччезновение элемента при скролле (Scroll into view)
   
5. Анимация при прокрутке (While scrolling in view)
   
6. Анимация, когда страница загружается (или вы переходите на другую страницу) (Page load)
   
7. Анимация при прокрутка страницы (когда прокручиваете вверх или вниз) (Page scrolled)
   

Что из этого не сделать с помощью css? Создавая какую из этих анимаций - мне придется прибегнуть к Javascript? Или это всё реализуемо силами css?

Answer 1

[Aleksey Solovyev]

Выражайте цели более конкретно... В зависимости от них и будет ясна возможность.
Для примера в первом пункте можно использовать :target jsfiddle.net/84hj53u9 Или использовать input radio

2 и 3 пункт это обычный :hover

3. Можно придумать сетку из квадратов(4x4, 8x8 в зависимости от точности). Если мы наезжаем на какой-то квадрат(:hover), то определенный элемент, который привязан к этому квадрату, анимируется. Извращение - да, но работает без JS. jsfiddle.net/znr6k1c3 (если сделать сетку больше, то и контроля будет больше)

4 и 5 Была какая-то новая api(в очень сырой пре-альфа), которая отвечала за появление во вью элемента. Не могу вспомнить(мб путаю с js)... Поддержки никакой, но Вы ничего не пояснили для чего надо.

6. Создаете @keyframes, который будет анимироваться при загрузке контента: jsfiddle.net/6yh0g82w

7. Нет

Все это извращение, которое не имеет смысла. Если у вас задача сделать проект без js, то и анимация не нужна. Ибо задача совсем в другом состоит. А для всего остального давно уже придумали GSAP, animejs и etc

Comments

[Bongie]

Я подразумевал без извращений - стандартные свойства для css. И, видимо, помимо ховера ничего из этого реализовать нельзя. Спасибо большое

Answer 2

[Николай Чуприк]

Можно 2, остальное нельзя.

Comments

[Хороший UI]

Через css можно еще 1ый пункт, через чекбокс и псевдокласс checked

[Bongie]

Верстальщик Ваш, Николай Чуприк, спасибо! Без извращений, я имел ввиду стандартные свойства css

Answer 3

[xmoonlight]

Вопрос похож на:
"Я не знаю css, но хочу принимать качественную фронт-end вёрстку от исполнителя или сдать тест".
Ответ прост: УЧИТЕ CSS!

Comments

[Bongie]

У меня нет какой-либо цели. Мне просто стало интересно, может ли css создавать такие анимации (стандартными свойтвами. Без всяких чекбоксов) И после ваших ответов понял - помимо анимации при наведении (и наверняка, простенькой) - нельзя