Snippets Collections
son funciones en el plano cartesiano 0.0 y 1.1
cubic-bezier(p1, p2, p3, p4): p<=1

Todas las funciones cubicas tienen un punto de inflexión(o dos puntos de concavidad):
T1= (p1,p2) cordenada donde termina concavo hacia abajo(punto 1 de inflexión)
T2= (p3,p4) cordenada donde termina convexo hacia arriba(punto 2 de inflexión)
Nota: si tiene dos puntos de inflexión es porque entre en 1 y el 2 hay una recta 
img {
	transition: all ease 500ms;
}

img:hover {
	transform: scale(1.25);
	opacity: 0.7;
}
JQUERY
function whichAnimationEvent(){
  var t,
      el = document.createElement("fakeelement");

  var animations = {
    "animation"      : "animationend",
    "OAnimation"     : "oAnimationEnd",
    "MozAnimation"   : "animationend",
    "WebkitAnimation": "webkitAnimationEnd"
  }

  for (t in animations){
    if (el.style[t] !== undefined){
      return animations[t];
    }
  }
}

var animationEvent = whichAnimationEvent();

$(".button").click(function(){
  $(this).addClass("animate");
  $(this).one(animationEvent,
              function(event) {
    // Do something when the animation ends
  });
});

/****************************/

JS ONLY
var button = document.querySelector(".button"),
    transitionEvent = whichTransitionEvent();

button.addEventListener("click", function() {
  if (button.classList) {
    button.classList.add("animate");
  } else {
    button.className += " " + "animate";
  }

  button.addEventListener(transitionEvent, customFunction);
});

function customFunction(event) {
  button.removeEventListener(transitionEvent, customFunction);

  // Do something when the transition ends
}
star

Wed Mar 16 2022 20:19:27 GMT+0000 (UTC) https://www.bauer.uh.edu/parks/bezier.htm

#funcion #css #transition #cubic-bezier
star

Wed Jan 20 2021 17:02:01 GMT+0000 (UTC)

#transition #animation

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension