Comment ajouter un effet animation-duration

Résolu/Fermé

flexi2202 Messages postés 3820 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 16 avril 2025 - 3 oct. 2022 à 08:26
flexi2202 Messages postés 3820 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 16 avril 2025 - 10 oct. 2022 à 11:30

bonjour a tous

après avoir trouve mon bonheur avec un code tout fait je souhaiterais pouvoir lui ajouter une animation-duration

Pour l'instant le code fonctionne parfaitement

Lorsque je clic sur ajouter au panier on voit parfaitement bien l'objet se déplacer vers le panier

Mais il se déplace trop rapidement

j'ai bien tente d'essayer d'ajouter une animation-duration lorsque on clic sur ajouter au panier

mais cela n'a eu aucun effet voici le code complet

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Nice Move To Cart Animation</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="b-cart">Cart (<span class="b-cart__count">0</span>)</div>

<ul class="b-items">
  <li class="b-items__item">
    <a href="#">
      <img class="b-items__item__img" src="http://fakeimg.pl/200x200/?text=World&font=lobster" alt="" />
      <span class="b-items__item__title">Product 8</span>
    </a>
    <a href="#" class="b-items__item__add-to-cart">Add to cart</a>
  </li>
</ul>
<!-- partial -->
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>

var cart = $('.b-cart'),
    cartCountCont = cart.find('.b-cart__count'),
    cartCount = parseInt(cartCountCont.text(), 10),
    addToCart = $('.b-items__item__add-to-cart');

addToCart.on('click', function (evt) {
  evt.preventDefault();
  evt.stopPropagation();
  
  var el = $(this),
      item = el.parent(),
      img = item.find('.b-items__item__img'),
      cartTopOffset = cart.offset().top - item.offset().top,
      cartLeftOffset = cart.offset().left - item.offset().left;
  
  var flyingImg = $('<img class="b-flying-img">');
  flyingImg.attr('src', img.attr('src'));
  flyingImg.css('width', '200').css('height', '200');

  cartCount += 1;

 flyingImg.animate({
    top: cartTopOffset,
    left: cartLeftOffset,
    width: 50,
    height: 50,
    opacity: 0.1
  }, 800, function () {
    flyingImg.remove();
    cartCountCont.text(cartCount);
  });
  
  el.parent().append(flyingImg);
});

.b-cart {
  width: 150px;
  height: 37px;
  background: #E74C3C;
  color: #fff;
  text-align: center;
  font-family: "Helvetica Neue";
  font-size: 21px;
  padding-top: 13px;
  border-bottom: 3px solid #d83d2d;
  border-radius: 4px;
  margin-left: 13px;
}
.b-cart:hover {
  opacity: 0.8;
}
.b-items {
  margin: 100px 0 0 0;
  padding: 0;
}
.b-items .b-items__item {
  display: inline-block;
  border: 1px solid #eee;
  width: 200px;
  position: relative;
  border-radius: 4px;
  margin: 0 12px 21px 12px;
}
.b-items .b-items__item .b-items__item__img {
  border-radius: 4px 4px 0 0;
}
.b-items .b-items__item a {
  display: block;
  text-decoration: none;
  text-align: center;
}
.b-items .b-items__item a:hover {
  opacity: 0.8;
}
.b-items .b-items__item__title {
  display: block;
  font-size: 18px;
  margin-top: 9px;
  font-family: "Helvetica Neue";
  color: #95A5A6;
}
.b-items .b-items__item__add-to-cart {
  font-family: "Helvetica Neue";
  display: block;
  background: #16A085;
  color: #fff;
  margin-top: 9px;
  padding: 12px 0;
  border-radius: 0 0 4px 4px;
  border-bottom: 2px solid #0a9479;
}
.b-flying-img {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  z-index: 5;
  animation: fly 0.8s 1;
  -webkit-animation: fly 0.8s 1;
  -webkit-backface-visibility: hidden;
}
@keyframes fly {
  0% {
    -moz-transform: rotate(0deg);
    /* Для Firefox */
    -ms-transform: rotate(0deg);
    /* Для IE */
    -o-transform: rotate(0deg);
    /* Для Opera */
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
    /* Для Firefox */
    -ms-transform: rotate(360deg);
    /* Для IE */
    -o-transform: rotate(360deg);
    /* Для Opera */
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes fly {
  0% {
    -webkit-transform: rotate(0deg);
    /* Для Safari, Chrome, iOS */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Для Safari, Chrome, iOS */
  }
}

A voir également:

Comment ajouter un effet animation-duration
Effet miroir word - Guide
Comment ajouter un compte facebook - Guide
Impossible d'ajouter un ami sur facebook - Guide
Ajouter un compte whatsapp - Guide
Ajouter un compte gmail - Guide

1 réponse

Réponse 1 / 1

Pollux
3 oct. 2022 à 21:05

Salut,

si vous parlez de la propriété CSS il suffit de regarder la notice:

https://developer.mozilla.org/fr/docs/Web/CSS/animation-duration

Pour apprendre à utiliser les animations il serait plus pratique de faire ça dans un fichier à part histoire de pas mélanger avec du code déjà existant et bien comprendre le(s) principes en eux même. Suivre un cours précis sur l'animation CSS peut aider aussi, ensuite vous avez compris vous pouvez facilement intégré ce que vous voulez au reste.

https://www.w3schools.com/css/css3_animations.asp

flexi2202 Messages postés 3820 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 16 avril 2025 190
10 oct. 2022 à 11:30

salut

Merci de l'aide

j'ai fini par trouver

Discussions similaires

Comment savoir comment on nous a ajouté sur Snap

Je n'arrive pas à ajouter un ami sur Facebook

Forum CSS

Questions et réponses sur les feuilles de style