css - fancy - title tag html5

¿Por qué mi Transformación retrocede?

Question

Estoy tratando de hacer que mi elemento permanezca en su lugar (después de la transición). En este momento, la ubicación traducida es donde la quiero, pero luego mi nombre vuelve a aparecer en la cita. ¿Me estoy perdiendo un fragmento de código o hay un fragmento de código que está haciendo que este cambio ocurra?

.blockquote {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 30px;
  line-height: 60px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.16);
  /*rgba(192, 241, 247, 0.15);*/
  height: 100px;
  text-align: center;
  padding-top: 40px;
  color: white;
  font-weight: 300;
  font-style: italic;
  transition: all 250ms ease-in-out;
}
.blockquote .blockquote2 {
  transition: all 250ms ease-in-out;
  font-size: 25px;
  line-height: 35px;
  width: 90%;
}
.blockquote .author {
  display: inline;
  margin-left: -150px;
  transition: all 250ms ease-in-out;
  font-family: "Roboto", sans-serif;
  color: #838eca;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 35px;
  opacity: 0;
}
.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
  transition: all 250ms ease-in-out;
}
.blockquote:hover .author {
  opacity: 1;
  font-weight: 900;
  color: rgb(25, 137, 228);
  transform: translateX(200px);
  transition: all 250ms ease-in-out;
}

<div class="blockquote">
  <div class="blockquote2"> <b>雕刻</b>自己的路
    <p class="author">- Jason Zhang</p>
  </div>
</div>

Answer 1

¡Vaya! Acabo de leer tu pregunta de nuevo. Este ejemplo hace que el nombre vuelva al frente al final de la animación y permanezca allí. Pensé que eso era lo que querías.

Ok, entonces la transición nunca permanecerá en el estado de desplazamiento. Hice uno aquí usando animación: http://codepen.io/Haelu/pen/qdLxao

-webkit-animation: authoranim 250ms ease-in-out normal forwards;
  animation: authoranim 250ms ease-in-out normal forwards;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;

@-webkit-keyframes authoranim {
  0% {
    -webkit-transform: translateX(0px);
    opacity:0;
  }
  50% {
    -webkit-transform: translateX(210px);
    opacity:1;
  }
  90% {
    -webkit-transform: translateX(200px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }

  @-keyframes authoranim {
  0% {
    transform: translateX(0px);
    opacity:0;
  }
  50% {
    transform: translateX(210px);
    opacity:1;
  }
  90% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0px);
  }

Esto no es exactamente lo mismo que tenía, pero tal vez pueda refinarlo. Agregue otro conjunto de fotogramas clave para animar el div entre comillas a la izquierda y agregue un valor para el peso de la fuente en la animación existente que hice.

Estoy bastante seguro de que -webkit- es el único prefijo necesario ahora, ya que la mayoría de los navegadores modernos ejecutarán el código sin eso, por lo que puede ver que todo está duplicado usando ese prefijo.

Espero que esto ayude.

La única otra cosa es que si el mouse se mueve fuera del div antes de que finalice la animación, volverá a ''pausa'' en mitad de la animación.

Para obtener más información sobre animaciones, incluido el orden del código abreviado: http://www.w3schools.com/cssref/css3_pr_animation.asp

Answer 2

La respuesta seleccionada no funcionó para mí. Tuve que envolver mi elemento en un div donde agregué las propiedades de transformación y luego agregué display: inline-block a ese div.

Answer 3

Causa y solución:

Las transformaciones CSS generalmente no se pueden aplicar a elementos que tienen display: inline configuración en display: inline . Si bien es extraño que la transform parezca suceder inicialmente antes de retroceder, la solución sería cambiar la configuración para display: inline-block en display: inline-block como en el fragmento de abajo.

.blockquote {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 30px;
  line-height: 60px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.16);
  /*rgba(192, 241, 247, 0.15);*/
  height: 100px;
  text-align: center;
  padding-top: 40px;
  color: white;
  font-weight: 300;
  font-style: italic;
  transition: all 250ms ease-in-out;
}
.blockquote .blockquote2 {
  transition: all 250ms ease-in-out;
  font-size: 25px;
  line-height: 35px;
  width: 90%;
}
.blockquote .author {
  display: inline-block;
  margin-left: -150px;
  transition: all 250ms ease-in-out;
  font-family: "Roboto", sans-serif;
  color: #838eca;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 35px;
  opacity: 0;
}
.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
  transition: all 250ms ease-in-out;
}
.blockquote:hover .author {
  opacity: 1;
  font-weight: 900;
  color: rgb(25, 137, 228);
  transform: translateX(200px);
  transition: all 250ms ease-in-out;
}

<div class="blockquote">
  <div class="blockquote2"> <b>雕刻</b>自己的路
    <p class="author">- Jason Zhang</p>
  </div>
</div>

¿Por qué el elemento se traduce inicialmente si no es transformable?

El comportamiento de los navegadores (al menos Chrome) parece extraño y solo puedo pensar que es un error, pero es muy probable que este comportamiento se deba al procesamiento acelerado en los navegadores y a la forma en que las capas se crean y se mueven para proporcionar un mayor rendimiento.

En los navegadores modernos, se crea una capa de composición cada vez que los objetos de renderizado (los nodos DOM) coinciden con un determinado criterio y uno de ellos es tener una transformación animada / en transición (consulte el artículo mencionado en las referencias). Ahora, cuando esto sucede, la GPU aplica la transformación solo a la capa de composición cambiando sus atributos compuestos. Esto (por alguna razón desconocida para mí) no parece tener en cuenta la configuración de display del elemento, por lo que el elemento / capa se traduce.

Sin embargo, al principio y al final de la transition , el navegador vuelve a pintar toda la página porque no hay necesidad de una capa de composición adicional una vez que se completa la transition y esta pintura parece volver a colocar el elemento en su lugar original.

A continuación se muestra un fragmento muy simple que he creado con transformaciones en la etiqueta span para ilustrar mi punto anterior. Ejecute el fragmento después de habilitar las opciones "Mostrar rectángulos de pintura" y "Mostrar bordes de capa compuestos" desde las herramientas de Chrome Dev (consulte el elemento de referencia 3 para saber cómo habilitar esta configuración). Notarás que inicialmente cuando pasas el hover sobre cualquier parte del body y la transition está por comenzar, ocurre una pintura (parpadeo verde o rojo en la pantalla) para crear las capas de composición. Una vez que se realiza este proceso, notará que se aplica un borde naranja a la etiqueta span . Esta es la capa de composición y verá cómo solo se mueve esta capa cuando ocurre la transition . Al final, ocurre otra pintura para eliminar las capas (ya que ya no es necesario) y esto vuelve a colocar el elemento en su lugar correcto según las especificaciones.

body:hover span {
  transition: all 1s 1s;
  transform: translateX(200px);
}

<span>abcd</span>

Como se mencionó anteriormente, no puedo proporcionar una respuesta autorizada sobre por qué la capa de composición se comporta de esta manera, pero según el fragmento de muestra y los artículos de referencia, puede ver que mi afirmación es válida.

Referencias

• Especificaciones W3C - Elementos transformables
• Proyectos de Chromium: renderizado acelerado por GPU en Chrome
• Rocas HTML5: renderizado acelerado en Chrome