Блог

Главная - Вопросы по программированию - Как изменить анимацию ключевых кадров css в webkit?

Как изменить анимацию ключевых кадров css в webkit?

#html #animation #css #keyframe

#HTML #Анимация #css #ключевой кадр

Вопрос:

У меня есть элемент управления, который я хочу переключать между двумя местоположениями после анимации ключевого кадра. Есть ли способ использовать тот же ключевой кадр, но в обратном порядке? Кроме того, есть ли способ остановить анимацию на полпути и вернуть ее к началу?

Вот что у меня есть сейчас (и я хочу объединить два ключевых кадра:

 @-webkit-keyframes explode {
  0% {
-webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px);
 }
 33% {
   -webkit-transform: scale(2.0)   translate(100px, -150px);
 }
 67% {
   -webkit-transform: scale(2.0)   translate(200px, -250px);
 }
 100% {
   -webkit-transform: scale(1.0)  translate(-15px, -15px);
 }
}

@-webkit-keyframes explodeBack {
 0% {
  -webkit-transform: scale(1.0)  translate(-15px, -15px);
 }
 67% {
   -webkit-transform: scale(2.0)   translate(100px, -150px);

 }
 100% {
   -webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px);

 }
}

.leftArrowAnimateForward{
     -webkit-animation-name: explode;
     -webkit-animation-duration: 3s;
     -webkit-animation-timing-function: linear;
     -webkit-animation-direction:normal; /* Safari and Chrome */
      -webkit-transform: scale(1.0)  translate(-15px, -15px);
}

.leftArrowAnimateBackward{
     -webkit-animation-name: explodeBack;
     -webkit-animation-duration: 3s;
     -webkit-animation-timing-function: linear;
     -webkit-animation-direction:alternate; 
      -webkit-transform: scale(1.0)  translate(0px, 0px);
}

Комментарии:

1. Вы уверены, что вам нужна анимация CSS? То, что вы пытаетесь сделать, невероятно просто с помощью CSS-переходов, но версия ключевых кадров включает в себя много уродливых js

2. да, я сократил свой код, но фактические ключевые кадры намного сложнее.

3. хм… Я не думаю, что то, что вы ищете, можно сделать в CSS3, поскольку единственными animation-direction значениями являются normal и alternate. Alternate будет воспроизводить ее в обычном направлении, затем в обратном, но я не думаю, что вы можете воспроизводить ее исключительно в обратном.

Ответ №1:

Трудно понять, что вы пытаетесь сделать, не видя визуально, что у вас есть до сих пор, но проверьте анимацию-режим заполнения.

Это позволит вашей анимации остановиться на последнем ключевом кадре, когда установлено значение forward, где на данный момент, я полагаю, ключевые кадры возвращаются к 0, когда они закончены.

Поиграйте и дайте нам знать, если ваш успех.

Ответ №2:

Вы можете сделать первое, что вы хотите сделать, если вы объедините animation-iteration-count: 2 с animation-direction: alternate и animation-delay, которая отрицательна по отношению к длине вашей анимации, вы получите анимацию для воспроизведения в обратном порядке ровно один раз. (В основном он переходит к анимации обратного направления и начинает воспроизводиться там.)

Вы не можете сделать вторую вещь, которую хотите сделать с чистой анимацией CSS, если не определите второй набор ключевых кадров и не переключитесь между классами с помощью JS (или наведите курсор или что-то еще)

Ответ №3:

У меня была такая же проблема, и я использовал SCSS для создания двух версий ключевого кадра: normal и reverse.

https://github.com/lichunbin814/scss-utils#with-reverse-version

 /* mixin */

@mixin keyframe-reverse( $name, $value) {
  @keyframes #{$name}-rev {
    @each $position,
    $change in $value {
      #{ 100 -$position}% {
        @each $prop,
        $val in $change {
          #{$prop}: #{$val};
        }
      }
    }
  }
}

@mixin keyframe-normal( $name, $value) {
  @keyframes #{$name} {
    @each $position,
    $change in $value {
      #{$position}% {
        @each $prop,
        $val in $change {
          #{$prop}: #{$val};
        }
      }
    }
  }
}

@mixin keyframe-gen( $name, $value, $genReverse) {
  @include keyframe-normal( $name: $name, $value: $value);
  @if ($genReverse) {
    @include keyframe-reverse( $name: $name, $value: $value)
  }
}


/* use */

@include keyframe-gen(
  $name : "fadeIn" ,  
   $value : (
      0: (
            transform: scale(1),
            opacity: 1
      ),
      100: (
            transform: scale(0),
            opacity: 0
      ),
   ) , 
   $genReverse : true 
);

.menu {
  animation-name: fadeIn-rev;
  amp;.active {
    animation-name: fadeIn;
  }
}

// output css

/*
@keyframes fadeIn {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes fadeIn-rev {
  100% {
    transform: scale(1);
    opacity: 1;
  }
  0% {
    transform: scale(0);
    opacity: 0;
  }
}
*/