css - por - que es un fotograma clave en flash cs6

Cómo establecer el nombre de los fotogramas clave en MENOS

Question

Intento configurar este LESS mixin para fotogramas clave de animación CSS:

.keyframes(@name, @from, @to) {;
  @-webkit-keyframes "@name" {
    from {
      @from;  
    }
    to {
      @to;
    }
  }
}

pero hay algún problema con el nombre pharse, ¿hay alguna opción para hacer esto correctamente?

Answer 1

A partir de LESS> = 1.7 puede usar variables para palabras clave de fotogramas clave (nombres).

Se han realizado algunos cambios en LESS 1.7 a cómo funcionan las directivas, lo que permite utilizar variables para el nombre / palabra clave de @keyframes (por lo que el ejemplo de la pregunta debería funcionar ahora). DEMO

Desafortunadamente, los nombres de los fotogramas clave no se pueden generar dinámicamente en MENOS <= 1.6

Por lo tanto, la forma normal de realizar fotogramas clave utilizaría nombres codificados y solo se solicitarían mixins específicos "for" y "to", como este:

.colors-mixin-frame(@from,@to){
from {color: @from;}
to {color: @to;}
}

.width-mixin-frame(@from,@to){
from {width: @from;}
to {width: @to;}
}

// keyframes with hardcoded names calling for specific mixin frames
@keyframes red-blue { .colors-mixin-frame(red, blue); }
@keyframes change-width { .width-mixin-frame(254px, 512px); }

Pero puedes usar una solución para generar dinámicamente los nombres

donde se inyecta el nombre en el nombre de la regla, sin embargo, esto requiere una declaración de la siguiente regla que proporcione el corchete de cierre } al final de la declaración de los fotogramas clave. Lo más conveniente es si simplemente creas la animación llamando a ese fotograma clave.

.animation-keyframes(@name, @from, @to, @anim-selector) {
  @keyf: ~"@keyframes @{name} { `''/n''`from ";
  @anim: ~"} `''/n''`.@{anim-selector}";
  @{keyf} {
      .from(@name,@from);
        }
      to {
        .to(@name,@to);
      }
  @{anim} {
    animation-name:@name;
  }
}

Tenga en cuenta que también necesita definir .from(){} y .to(){} , y no solo usar @from y @to como lo hizo en su ejemplo (porque LESS tampoco permite las propiedades generadas dinámicamente). .. estos mixins ahora pueden construir las propiedades y valores deseados ... para usar propiedades específicas, puede usar guardias o mixins específicos de nombres como estos:

// name-specific from and to mixins that are used if first argument equals "colors"
.from (colors, @color) {
  color: @color;
}
.to (colors, @color) {
  color: @color;
} 

Ahora podemos llamar a nuestro mixin en MENOS:

// test
.animation-keyframes (colors, red, blue, my-colanim);

y obtener CSS:

@keyframes colors { 
from {
  color: #ff0000;
}
to {
  color: #0000ff;
}
} 
.my-colanim {
  animation-name: colors;
}

esto funcionará también en LESS 1.4, pero tenga en cuenta que usamos interpolación de javascript para saltos de línea, lo que requiere una implementación de javascript de LESS.

Editar: a su pregunta adicional sobre prefijos

Mixin con prefijos de vendedor

Aquí hice dos mixins ... uno sin prefijos de proveedores y uno con los dos llamando a un mixin .keyframes general:

.keyframes (@name, @from, @to, @vendor:"", @bind:"") {
  @keyf: ~"@{bind}@@{vendor}keyframes @{name} { `''/n''`from ";
  @{keyf} {
      .from(@name,@from);
        }
      to {
        .to(@name,@to);
      }
}

.animation-keyframes-novendor (@name, @from, @to, @anim-selector) {
  .keyframes (@name, @from, @to);
  @anim: ~"} `''/n''`.@{anim-selector}";
  @{anim} {
    animation-name:@name;
  }
}

.animation-keyframes (@name, @from, @to, @anim-selector) {
  @bind: "} `''/n''`";
  .keyframes (@name, @from, @to, "-moz-");
  .keyframes (@name, @from, @to, "-webkit-", @bind);
  .keyframes (@name, @from, @to, "-o-", @bind);
  .keyframes (@name, @from, @to, "-ms-", @bind);
  .keyframes (@name, @from, @to, "", @bind);
  @anim: ~"} `''/n''`.@{anim-selector}";
  @{anim} {
    -moz-animation: @name;
    -webkit-animation: @name;
    -o-animation: @name;
    -ms-animation: @name;
    animation: @name;
  }
}

.from (colors, @color) {
  color: @color;
}
.to (colors, @color) {
  color: @color;
}

/* keyframes with all vendor prefixes */
.animation-keyframes (colors, red, blue, my-colanim);

/* keyframes with no vendor prefix */
.animation-keyframes-novendor (colors, red, blue, my-colanim);

Los .animation-keyframes ahora producirán fotogramas clave para todos los prefijos de proveedores y un selector de animación con propiedades prefijadas de proveedores. Y como era de esperar, .animation-keyframes-novendor da el mismo resultado que la solución simple anterior (sin prefijos de proveedores).

Algunas notas:

• Para que su animación realmente funcione, necesita configurar otros parámetros de animación como la función de tiempo, la duración, la dirección, el recuento de iteraciones (requiere al menos un tiempo de duración además del nombre que ya hemos establecido).

  Por ejemplo:

   animation: @name ease-in-out 2s infinite alternate;

• Si envuelve los mixins anteriores en espacios de nombres, asegúrese de cambiar las referencias de mixin dentro de otros mixins a su ruta completa (incluidos los espacios de nombres).

  Por ejemplo:

   #namespace > .keyframes () // see .less source in the demo for details

DEMO

Answer 2

¡ github.com/kuus/animate-me.less antes mencionado hace cosas!

También puede consultar este escrito por mí (parece estar más ordenado): https://github.com/thybzi/keyframes

Answer 3

Actualmente estoy trabajando en una biblioteca mixin

La fuente se puede encontrar aquí https://github.com/pixelass/more-or-less

Mi combinación de fotogramas clave se ve así:

TRABAJOS POR MENOS 1.7.x

MEZCLAR

.keyframes(@name) { 
    @-webkit-keyframes @name {
        .-frames(-webkit-);
    }
    @-moz-keyframes @name {
        .-frames(-moz-);
    }
    @keyframes @name {
        .-frames();
    }
}

ENTRADA

& {
    .keyframes(testanimation);.-frames(@-...){
        0% {
            left: 0;
            @{-}transform: translate(10px, 20px);
        }

        100% {
            left: 100%;
            @{-}transform: translate(100px, 200px);
        }
    }
}

SALIDA

@-webkit-keyframes testanimation {
  0% {
    left: 0;
    -webkit-transform: translate(10px, 20px);
  }
  100% {
    left: 100%;
    -webkit-transform: translate(100px, 200px);
  }
}
@-moz-keyframes testanimation {
  0% {
    left: 0;
    -moz-transform: translate(10px, 20px);
  }
  100% {
    left: 100%;
    -moz-transform: translate(100px, 200px);
  }
}
@keyframes testanimation {
  0% {
    left: 0;
    transform: translate(10px, 20px);
  }
  100% {
    left: 100%;
    transform: translate(100px, 200px);
  }
}

Answer 4

Creo que deberías hacer esto

@-webkit-keyframes @name 
{
 code...
}

cambiar "@name" a @name

y usted debe eliminar ; después

.keyframes(@name, @from, @to) {

Answer 5

Qué tal esto:

@-webkit-keyframes some-animation {.mixi-frames;}
@-moz-keyframes some-animation {.mixi-frames;}
@-ms-keyframes some-animation {.mixi-frames;}
@-o-keyframes some-animation {.mixi-frames;}
@keyframes some-animation {.mixi-frames;}

.mixi-frames () {
    from {width: 254px;}
    to {width: 512px;}
}

Necesitas hacerlo para cada animación. Tomado de: http://radiatingstar.com/css-keyframes-animations-with-less

Answer 6

También gracias a la gran respuesta de , (gracias por eso) Acabo de poner en github una mezcla menor que genera fotogramas clave y código css de animación sin trucos y de manera flexible, puede encontrarlo aquí github.com/kuus/animate-me.less .

Con este mixin puede escribir este código para obtener un css válido y cruzado (vea el repositorio de github para una explicación completa):

.animate-me(ComplexAnimation; 0.4s ease; ''.complex-animation'';
    ''50%, 100%''; ''%stransform: translateZ(-250px) rotateY(30deg)'';
    70%; ''%stransform: translateZ(-250px) rotateY(30deg); opacity: .5; background:   green'';
    30%; ''%stransform: translateZ(-250px) rotateY(30deg); opacity: .2; background: yellow'';
    80%; ''%stransform: translateZ(-250px) rotateY(30deg); opacity: 1; background: red''
);