texto - keyframes css3 ejemplos
Animación SMIL SVG en desuso, reemplazada con CSS o efectos de animaciones web(hover, click) (1)
De acuerdo con este tema:
Problemas SMIL de Firefox 38-40: velocidad muy lenta (resuelto en la versión 41 de FF del 22.09.15)
y este tema:
La etiqueta SVG ''animateTransform'' no funciona bien. Sería bueno reemplazar SMIL (etiqueta animada) con CSS o transiciones CSS.
CONSOLE WARNING: Please use CSS animations or Web animations instead),
which would work fast on the latest versions of Firefox and Chrome.
La próxima advertencia de Google Chrome:
CONSOLE WARNING: SVG''s SMIL animations (''animate'', ''set'', etc.) are deprecated
and will be removed. Please use CSS animations or Web animations instead.
Revisión 196823: Agregar advertencia de desaprobación de SMIL
Para empezar, necesito implementar tres cosas:
1) Efecto de desplazamiento sobre el mouse (el más fácil)
Cómo fue:
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the opacity animation on mouseout -->
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
</rect>
Quité las etiquetas set , añadí clases a la etiqueta rect y agregué esto a la clase Pseudoclave de CSS:
.element_tpl:hover {
stroke-opacity: 0.5;
}
2) Se amplía algunas veces después del cambio comprometido con este elemento (carga de la página)
Cómo fue:
<!--animation-->
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>
Cómo organizar sin la etiqueta animate :
???
3) Anima la ampliación y la reducción (onclick)
Cómo fue:
<!--it animates scale up and scale down onclick -->
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s" fill="freeze"/>
¿Cómo organizar sin etiqueta animate ? Intenté usar :active , pero hay diferencias en el comportamiento:
.element_tpl:active {
transform: scale(1.1);
}
Este es el código completo de mi elemento de plantilla:
<g id="switcher" cursor="pointer" stroke-width="0.15">
<g transform="scale(1,1.375)">
<g>
<rect x="-0.5" y="-0.5" width="1" height="1" stroke="white" pointer-events="none"/>
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the opacity animation on mouseout -->
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
</rect>
<line x1="0" y1="-0.25" x2="0" y2="0.25" stroke-width="0.17" stroke-linecap="round" pointer-events="none"/><!-- vertical on -->
<!--animation-->
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>
<!--it animates scale up and scale down onclick -->
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s"
fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s"
fill="freeze"/>
</g>
</g>
</g>
La versión de trabajo de mi proyecto de trabajo actual se ve así:
http://jsfiddle.net/7e2jeet0 (anteriormente solo lo usaba un navegador FF - porque (preste atención) el mouse funciona aquí con 2 cifras - porque [Chrome admite SMIL y ''use'' juntos, Firefox no admite SMIL y ''use actualmente ''juntos] / según Robert Longson)
en mi intento de hacer el CSS equivalente, parece
http://jsfiddle.net/7e2jeet0/1/ (en FF)
http://jsfiddle.net/7e2jeet0/2/ (en Chrome)
o lo mismo para otro elemento. Versión de trabajo:
¡Gracias!
Editar 1
Descubrí que esta variante de combinación funcionará bien para el mouse y el mousedown en Firefox, pero solo el efecto de desplazamiento funciona en Chrome.
También me interesa saber cómo puedo guardar algunas de estas animaciones:
transfiriéndolos a CSS / Web animations?
La compatibilidad con SMIL no se eliminó de Chrome, pero se reemplazó con un Polyfill. Eric Willigers ha creado un polyfill SMIL implementado completamente en la API de Web Animations. Puede encontrarlo aquí: https://github.com/ericwilligers/svg-animation