Animations css

Fermé

Hamoudeeh Messages postés 16 Date d'inscription jeudi 23 janvier 2014 Statut Membre Dernière intervention 19 juillet 2015 - 23 mars 2015 à 14:32
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 24 mars 2015 à 10:05

Bonjour,

j'aimerais faire une translation d'un objet avec css tout en faisant un temps d'arrêt de quelques secondes au milieu de la trajectoire.
Qui pourrai m'aider svp
Merci :)

A voir également:

1 réponse

Réponse 1 / 1

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 24/03/2015 à 10:12

Salut

voila un petit exemple vite fait avec une image , a toi de l adapter !

regarde du cote des @keyframes en css3 pour realiser ce que tu veux !

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">body {
      margin: 0;
      text-align: center;
    }

    .element{
      width: 600px;
      margin: auto;
      margin-top: 50px;
    }

    img.animation {
      border: 0;
      width: 50px;
      height: 50px;
    }
    /* debut anime */

    .animation{
      animation: animationFrames linear 10s;
      animation-iteration-count: 1;
      transform-origin: 50% 50%;
      animation-fill-mode: forwards;
      -webkit-animation: animationFrames linear 10s;
      -webkit-animation-iteration-count: 1;
      -webkit-transform-origin: 50% 50%;
      -webkit-animation-fill-mode: forwards;/*Chrome 16+, Safari 4+*/
      -moz-animation: animationFrames linear 10s;
      -moz-animation-iteration-count: 1;
      -moz-transform-origin: 50% 50%;
      -moz-animation-fill-mode: forwards;/*FF 5+*/
      -o-animation: animationFrames linear 10s;
      -o-animation-iteration-count: 1;
      -o-transform-origin: 50% 50%;
      -o-animation-fill-mode: forwards;/*pas encore implante*/
      -ms-animation: animationFrames linear 10s;
      -ms-animation-iteration-count: 1;
      -ms-transform-origin: 50% 50%;
      -ms-animation-fill-mode: forwards;/*IE 10+*/
    }

    @keyframes animationFrames{
      0% {
        opacity: 0;
        transform: translate(300px, 0px);
      }

      25% {
        opacity: 1;
        transform: translate(-25px, 0px);
      }

      75% {
        opacity: 1;
        transform: translate(-25px, 0px);
      }

      100% {
        opacity: 0;
        transform: translate(-300px, 0px);
      }
    }

    @-moz-keyframes animationFrames{
      0% {
        opacity: 0;
        -moz-transform: translate(300px, 0px);
      }

      25% {
        opacity: 1;
        -moz-transform: translate(-25px, 0px);
      }

      75% {
        opacity: 1;
        -moz-transform: translate(-25px, 0px);
      }

      100% {
        opacity: 0;
        -moz-transform: translate(-300px, 0px);
      }
    }

    @-webkit-keyframes animationFrames {
      0% {
        opacity: 0;
        -webkit-transform: translate(300px, 0px);
      }

      25% {
        opacity: 1;
        -webkit-transform: translate(-25px, 0px);
      }

      75% {
        opacity: 1;
        -webkit-transform: translate(-25px, 0px);
      }

      100% {
        opacity: 0;
        -webkit-transform: translate(-300px, 0px);
      }
    }

    @-o-keyframes animationFrames {
      0% {
        opacity: 0;
        -o-transform: translate(300px, 0px);
      }

      25% {
        opacity: 1;
        -o-transform: translate(-25px, 0px);
      }

      75% {
        opacity: 1;
        -o-transform: translate(-25px, 0px);
      }

      100% {
        opacity: 0;
        -o-transform: translate(-300px, 0px);
      }
    }

    @-ms-keyframes animationFrames {
      0% {
        opacity: 0;
        -ms-transform: translate(300px, 0px);
      }

      25% {
        opacity: 1;
        -ms-transform: translate(-25px, 0px);
      }

      75% {
        opacity: 1;
        -ms-transform: translate(-25px, 0px);
      }

      100% {
        opacity: 0;
        -ms-transform: translate(-300px, 0px);
      }
    }
    </style>
  </head>
  <body>
    <div class="element">
      <img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAA0ADQDASIAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAAAAQCAwUBBv/EABkBAAMBAQEAAAAAAAAAAAAAAAACBAMFAf/aAAwDAQACEAMQAAAB8VK1pdF5O2K2TVtNeN5oDWdrQznMK95SV9kCLSs+d1/NnSzmM259+e+rfn3eM5bl15vmnCmMACXQCPAAAD//xAAhEAACAwABBAMBAAAAAAAAAAABAgADERIEEBMxFCAhIv/aAAgBAQABBQKAbBXPFCmd61DQAaW/KjyPstWRRKhAFZk6dEW2yuywYssZjWfabg/mUL5XW8+XiWh00n3QcLaYjECtuTkFDaOdHZWgcYtvA/JIh6vV77N+n//EAB4RAAEEAwADAAAAAAAAAAAAAAEAAgMREBITICEy/9oACAEDAQE/AWxEi1xK4ervEPytnbJ4FWcMlDRSErEZWOHl/8QAHhEAAgICAgMAAAAAAAAAAAAAAQIAERASAxMgITH/2gAIAQIBAT8B2F1N52e6xyfYEWriE4ZLMKtAjA+X/8QAKBAAAQMDAQcFAQAAAAAAAAAAAQACERIhMRADICIyQXHBIzBCUVJh/9oACAEBAAY/At8yjgLC4uHuqCDbqto4/WnlBsVSvi4t5hK9JhDyYV+ZPbTYDSAJKmYIR2huBmFVQGuINyEZcnGrpr3RaHGP4iPzhVNv4UwGljTuQpCwERRkRn2f/8QAIRAAAgICAgIDAQAAAAAAAAAAAREAITFRQXEQYSCBkcH/2gAIAQEAAT8hhYKYS1DQjrxUHUWLAHfMQgUgqHwQFA7QswA9Mqyx7fgBokBnIpQwREgBcshKo/DMY6rEvuCO+h7lZBq4HcBQWRBwpWCK57EMJAC2RUZ9RC33A0YbJJ5MBAUTB/nial4sRkWGSZ4i1VXtuH4octR7DawvxCmxMJiGzGoBh8T1iYX0lRhErCo/8hh8AKPG/P8A/9oADAMBAAIAAwAAABDndnz8WAAKn4zwBzz/xAAdEQACAgIDAQAAAAAAAAAAAAABEQAhEDEggaHB/9oACAEDAQE/EEfqCq9yr06wjrdwjAO/sAwK2uCFryKpNjl//8QAHBEBAQEAAgMBAAAAAAAAAAAAAREAEDEgIUFR/9oACAECAQE/EEv001JvnLxUuoR0ZTA4S1ynvU4eny//xAAlEAEBAAMAAQMEAgMAAAAAAAABEQAhMUFRcYEQYZGhINGxwfD/2gAIAQEAAT8QxDRhHMAY4xiS7a+30SFpK3ruADcAKfl641FdQmv6w0VSHa9yedV/GLSAgcb5O3/uGA6AQb0GQ+iIjBI0W34zQEk1q6ac+MUcQ9p0fUdaxUNCcA8v3/rFQjaj04yvIM6bTY8r85QMbbOA0vV/WVHmE0nTNXNNqCgcV3+sAqKL1AAPEIZJyIbZbWHnzlPBWYpJ9z3FvhOoZ+47P94AADjhTLiLQWuWcA/H+MVy6PMl2edO/bFhIdOl0j24+THBYk4J4X19dxxUcEqKezlSa8V5iLKskWn7wRTQUxB6IeMZEXgEZeO9nvzxmgdqWbJYn8B8cfVxXT9f/9k="
      class="animation" alt="">
    </div>
  </body>
</html>

a+

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Discussions similaires

Présentation Impress pour effectuer un diaporama

Problème d'animation dans une présentation avec PowerPoint2016

Conserver animation powerpoint en format pdf

trait horizontal avec du css

indice et exposant en css ?