Как сделать такую анимацию галочки?

Question

[Genri_Rus]

Собственно вопрос именно в нативной анимации отрисовки CSS галочки

Вот пример: https://codepen.io/Genri_Rus/pen/BgVwob

<div class="wrap">
    <div id="check-part-1" class="check-sign"></div>
    <div id="check-part-2" class="check-sign"></div>
</div>

.wrap {
    position: relative;
    margin-top: 100px;
}

.check-sign {
    position: absolute;
    background: red;
}

#check-part-1 {
    width: 50px;
    height: 20px;    
    transform:rotate(45deg);	
}

#check-part-2 {
    width: 100px;
    height: 20px;    
    transform: rotate(-45deg);
    left: 16px;
    top: -19px;
}

Нужно сделать, чтобы анимация прорисовки у галочки отрабатывала один раз

Т.е. по умолчанию галочка скрыта, а когда кто-то кликает по кнопке - анимация прорисовки срабатывала

Comments

[Владимир Юрченков]

Вы не знаете как анимацию средствами CSS сделать? А по вашему описанию без JS не обойтись..

[Genri_Rus]

Владимир Юрченков, да - в данном случае нужно сделать анимацию отрисовки с помощью @keyframes

Было бы неплохо показать хотя бы анимацию без js

[Владимир Юрченков]

А какая именно анимация должна быть?

Answer 1

[ProjectSoft]

Без JS, но SVG


JS для обратной анимации

Comments

[Genri_Rus]

Спасибо большое, но без input и svg с помощью @keyframes никак не сделать ?

[ProjectSoft]

Я вам отвечу тоже самое, что и wqertAnna

[Genri_Rus]

ProjectSoft, а просто анимацию на @keyframes без js не получится ?

P.S. Допустим просто анимация

[wqertAnna]

Genri_Rus, нет, не получиться. Просто анимация на @keyframes не может реагировать на клик, поэтому как минимум нужен триггер, который запустит её. Это может быть или js или отмеченный чекбокс.

[ProjectSoft]

Genri_Rus,

Но сначала отработает обратная анимация.

[Genri_Rus]

wqertAnna, допустим мне вообще не нужен js и клик, просто css анимация - сложно такое реализовать с помощью @keyframes ?

[Genri_Rus]

ProjectSoft, поправочка - просто анимацию на @keyframes без input, svg и js не получится сделать ?

[ProjectSoft]

Genri_Rus, честно говоря не понятно, что именно вам уже нужно.
Если вам нужна зацикленная анимация, то просто установите повторение не один раз, а бесконечно
animation: checked 0.4s ease infinite forwards;

[ProjectSoft]

Genri_Rus, Вам дали и с SVG, и без него, и с JS, и без него.
Оба ответа вы можете использовать по-полной как угодно подправив под ваш проект, если потребуется.
Но и тот и другой способ может работать только в современных браузерах. Если поддерживается css трансформация и анимация, значит поддерживается svg.

[wqertAnna]

Genri_Rus, нет, несложно реализовать анимацию на @keyframes, но вопрос в том, когда она должна отработать?
Она может начаться при hover, но в этом случае перестанет работать после того, как hover снят
Есть вариант, что анимация отработает через какое-то определенное время после загрузки страницы (просто поставить задержку) или будет повторяться постоянно с определенным промежутком времени.

Как можно понять из интерактивности здесь только hover.

[Genri_Rus]

ProjectSoft, попытаюсь объяснить более детально )

Мне просто нужна анимация появления галочки на чистом css

Самое главное, чтобы реализация была без использования:

-input
-svg
-js

@keyframes приветствуется

P.S. Во всех примерах было либо input, либо svg, либо js

[ProjectSoft]

Genri_Rus, я же говорю - подправить под ваши нужды.
Берите пример wqertAnna , удаляйте input и применяйте анимацию.
Просто читайте код и будьте внимательны.

[Genri_Rus]

ProjectSoft, у wqertAnna без @keyframes

P.S. Если покажите, то буду очень Благодарен !

[ProjectSoft]

Genri_Rus,

[Genri_Rus]

ProjectSoft, спасибо огромное, отметил решением !

Answer 2

[wqertAnna]

https://codepen.io/anon/pen/agKYNa

Вот реализация без js и svg, только css
и без @keyframes)

Comments

[Genri_Rus]

Спасибо большое, но в данном случае input не подойдет

[wqertAnna]

Genri_Rus, действительно есть основания для того, чтобы не использовать input?

На сколько мне известно, другого способа сделать такую анимацию на чистом css без js нет.

[Genri_Rus]

wqertAnna, а просто анимацию на @keyframes без js не получится ?