Sujet Précédent Sujet Suivant

Scripts qui ne fonctionnent pas

Résolu/Fermé
rolly41 Messages postés 244 Date d'inscription dimanche 16 novembre 2008 Statut Membre Dernière intervention 5 novembre 2024 - Modifié par rolly41 le 20/08/2016 à 17:51
rolly41 Messages postés 244 Date d'inscription dimanche 16 novembre 2008 Statut Membre Dernière intervention 5 novembre 2024 - 21 août 2016 à 21:06
Bonjour,

Je fais en sorte qu'a chaque tentative de modification de la page des membre, si la modification est bien enregistré, qu'il y ai bien une notification qui s'affiche.

Le problème, c'est que malgré mes tentatives, aucune notifications ne s'affiche.

J'ai donc lancé l'inspection des éléments avec mes navigateurs, et je me rends compte qu'aucun de mes navigateur n'a chargé le fichier js avec la fonction.

Les navigateur affiche uniquement le js de la page:
http://code.jquery.com/jquery-3.1.0.min.js

aucun autre js n'est pris en compte SAUF quand je mets 1 seul lien de fichier js, là le navigateur le trouve mais ne l’exécute pas malgré l'appel de la fonction.

à quoi peut-être dus ce problème ?

3 réponses

Réponse 1 / 3
Utilisateur anonyme
Modifié par le père. le 21/08/2016 à 19:32
Bonjour

Il y a une erreur fondamentale dans tes scripts.
Tu utilises le caractère $ dans une chaîne entre doubles-quotes en php, quand tu veux créer un bout de code javascript : 
echo "<script>$('body').notif({t...

PHP croit que ces '$' introduisent des noms de variables php, ce qui n'est pas ton intention.
Deux solutions (entre autres) :
- tu échappes les '$' avec des \ : 
echo "<script>\$('body').notif({t
.
- ou, bien plus sain, tu refermes la balise php le temps de sortir ton code javascript, et tu la rouvres après
1
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
21 août 2016 à 20:46
Encore mieux que de fermer/ouvrir les balises php (ce n'est pas vraiment une bonne habitude à prendre..et donc loin d'être si "sain"....).....
Mettre les lignes de code dans une fonction (avec en paramètres une variable pour le title, une pour le content et une pour l'image) et ensuite de n'appeller que cette fonction dans les echo 
 echo "<script type='text/javascript'>taFonction(title,content,img);</script>";

Tu évites aisni de réécrire 20 fois les mêmes lignes de code et d'y mettre des $

Quoi qu'il en soit, les autres conseils que je t'ai donné s'appliquent tout de même.

Bonne continuation
0
rolly41 Messages postés 244 Date d'inscription dimanche 16 novembre 2008 Statut Membre Dernière intervention 5 novembre 2024 1
21 août 2016 à 21:06
Bonjour,

Voilà qui corrige mon problème :) Je vous en remercie du font du coeur :D
Je ne saurais sans doute jamais vous montrer toute ma gratitude :D
Mille merci :) (pas besoin de me dire mille derien xd).
0
Réponse 2 / 3
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
20 août 2016 à 20:13
Bonjour,

je pense que cela est du à une erreur dans ton code......
Pour te répondre..... il va falloir que tu nous colles ton code ici sur le forum.

Tu peux aussi regarder dans la console de ton navigateur (via les outils de debugage) (perso je te conseille d'utiliser le plugin FIREBUG pour FIREFOX). Ca te permettra de voir d'éventuelles erreurs dans le code js de ta page.

0
rolly41 Messages postés 244 Date d'inscription dimanche 16 novembre 2008 Statut Membre Dernière intervention 5 novembre 2024 1
Modifié par rolly41 le 21/08/2016 à 01:37
J'ai trouvé l'erreur qui est du a ceci : 
<script type="text/javascript" src="js/jquery.notif"></script>
je n'avais pas précisé l’extension --"

en revanche, je ne sais pas comment appeler la fonction de ce script ...

le script 
(function($){
 
 $.fn.notif = function(options){
  var settings = {html : '<div class="notification add animated fadeInDown">\
     <div class="notification-left {{succes}}">\
     <div class="iconimg">\
     {{{img}}}\
     </div>\
     </div>\
     <div class="notification-right">\
     <h2>{{{title}}}</h2>\
     <p>{{{content}}}</p>\
     </div>\
     </div>',
     img:'ℹ',
     succes:'error',
     timeout:false
     }
  if (options.succes == 'error')
  {
   settings.img = '❌';
  }
  if (options.succes == 'succes')
  {
   settings.img = '✓';
  }
  var options = $.extend(settings, options);
  
  return this.each(function(){
   var $this = $(this);
   var $notifs = $('> .notifications', this);
   var $notif = $(Mustache.render(options.html,options));
   if($notifs.length == 0){
    $notifs = $('<div class="notifications" />');
    $this.append($notifs);
   }
   $notifs.append($notif);
   if(options.timeout){
    setTimeout(function(){
     $notif.trigger('click');
    },options.timeout)
   }
   $notif.click(function(event){
    event.preventDefault();
    $notif.addClass('fadeOutUp').delay(500).slideUp(10, function(){
     if($notif.siblings().length == 0)
     {
      $notifs.remove();
     }
     $notif.remove();
    });
   })
  })
 }
 $('body').notif({title:'Titre de notification', content:'Je suis un contenu de notification' , timeout:60000});
})(jQuery);


dans une page php, je souhaite utiliser ce script pour afficher une notification d'erreur mais rien ne s'affiche ...

Voici le code utilisé pour l'appel 
if(!empty($erreur[login]))
{
echo "<script>$('body').notif({title:'Erreur de connexion', content:'Les informations ne sont pas correct, veuillez les vérifier !, succes:'error', img:'❌', timeout:60000});</script>";
}


Pourriez-vous m'aider sur la façon d'on je dois faire appel de cette fonction?
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705 > rolly41 Messages postés 244 Date d'inscription dimanche 16 novembre 2008 Statut Membre Dernière intervention 5 novembre 2024
21 août 2016 à 01:30
Tu as bien inclus jquery a ta page ?
Que t'affiche la consoledu navigateur ?
0
rolly41 Messages postés 244 Date d'inscription dimanche 16 novembre 2008 Statut Membre Dernière intervention 5 novembre 2024 1 > jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024
21 août 2016 à 02:01
jquery est inclu dans toute mes pages car justement je veux que des notifications puissent s'afficher à tout moment.

Pour ma console, aucune information sur le javascript voulu, il ne l'affiche pas, mais affiche bien la notification de base du script à savoir : 
 $('body').notif({title:'Titre de notification', content:'Je suis un contenu de notification' , timeout:60000});
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705 > rolly41 Messages postés 244 Date d'inscription dimanche 16 novembre 2008 Statut Membre Dernière intervention 5 novembre 2024
21 août 2016 à 02:15 
!empty($erreur[login]

N'aurais tu pas oublié les quote autour de "login" ?
0
rolly41 Messages postés 244 Date d'inscription dimanche 16 novembre 2008 Statut Membre Dernière intervention 5 novembre 2024 1
Modifié par rolly41 le 21/08/2016 à 02:36
non, quand il y a une erreur je fait ceci: 
<?php 
$erreur=array(); // de base, erreur est false

$erreur[login]='1'; // si il y a une erreur. si pas, je ne fais rien.
if($erreur != array())
    {
     if(!empty($erreur[login]))
     {
      echo "<script type='text/javascript'>$('body').notif({title:'Erreur de connexion', content:'Les informations ne sont pas correct, veuillez les corriger !, succes:'error', img:'❌', timeout:60000});</script>";
     }
    }?>
0
Réponse 3 / 3
rolly41 Messages postés 244 Date d'inscription dimanche 16 novembre 2008 Statut Membre Dernière intervention 5 novembre 2024 1
Modifié par rolly41 le 21/08/2016 à 12:15
Bonjour,

Voici mes page, ça va être très long ...

index.php 
<?php
 $subtitle='Accueil';
 include 'header.php';
 include 'body.php';
 if($maintenance == 'off')
 { 
  include 'menu.php';
  ?>
  <div class="contenu">
  ici le contenu actuellement vide
  </div>
  <?php
 }
 else
 {
  echo $img_maintenance;
 }
 include 'no-body.php';
?>


Les pages 'include'

header.php 
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/style1.css" />
  <link rel="stylesheet" href="css/animate.css" />
  <link rel="icon" href="img/favicon.ico" />
  <?php
   ini_set("display_errors",0);error_reporting(0); //---Désactiver les messages d'erreur PHP---
   include 'connect-bdd.php';
   session_start();
   include 'var.php';
  ?>


var.php 
<?php
 $nbrs_new_msg='0';
 $maintenance='off';
 $img_maintenance='<table height="100%" width="100%" align="center" valign="middle" border="0px"><tr><td align="center"><img src="img/maintenance2.png" /></td></tr></table>';
 if($maintenance == 'on')
  {
   $subtitle='Maintenance en cours ...';
  }
 $annee=date('Y') +1 ;
 $title='Mon site';
 $createdby='Created by Rolly Michaël';
 $copyrightprotect='© 2016 - '.$annee.' Tous droits réservés. <a href="cgu.php" rel="nofollow" target="_blank">Conditions Général d\'Utilisations</a> - <a href="politique-de-confidentialite.php" rel="nofollow" target="_blank">Politique de confidentialité</a>';
?>


connect-bdd.php 
<?php
 $local_host='127.0.0.1';
 $local_user='root';
 $local_passwd='';
 $local_bdd='etangsbelgique';
 $connect_bdd = mysql_connect($local_host, $local_user, $local_passwd);
 if (!$connect_bdd)
  {
   die('Impossible de se connecter : ' . mysql_error());
  }
 $db_selected = mysql_select_db($local_bdd, $connect_bdd);
 if (!$db_selected)
  {
   die ('Impossible de sélectionner la base de données : ' . mysql_error());
  }
?>


body.php ici il y a les script type="text/javascript" src="liens" 
<?php
 echo '<title>'.$title.' - '.$subtitle.'</title>';
 echo '</head>';
 if($maintenance == 'off')
 {
  if($subtitle == 'Shoutbox')
  {
   ?><body class="shoutbox" onload="document.getElementById('message').focus()"><?php
  }
  else
  {
   echo '<body class="style">';
   ?>
   <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
   <script type="text/javascript" src="js/mustache.js"></script>
   <script type="text/javascript" src="js/jquery.notif.js"></script>
   <?php
   if(!empty($_SESSION['token']))
   {
    include 'connexion.php';
   }
   if(isset($_POST['connexion']) && !empty($_POST['connexion']))
   {
    $erreur=array();
    if(strlen($_POST['login']) >=6 and strlen($_POST['login']) <=25)
    {
     $login=$_POST['login'];
    }
    elseif (strlen($_POST['login']) <=6 and strlen($_POST['login']) >=25)
    {
     $erreur['login']='Le login doit avoir entre 6 et 25 caractéres !';
    }
    if (strlen($_POST['passwd']) >=6 and strlen($_POST['passwd']) <=25)
    {
     $passwd= $_POST['passwd'];
    }
    elseif (strlen($_POST['passwd']) <=6 and strlen($_POST['passwd']) >=25)
    {
     $erreur['passwd']='Le mot de passe doit avoir entre 6 et 25 caractéres !';
    }
    if($erreur == array())
    {
     $sql="SELECT id from membres where login='$login' and passwd='$passwd'";
     $req=mysql_query($sql) or die(mysql_error());
     if(mysql_num_rows($req)>0)
     {
      //Connexion autorisée !
     }
     else
     {
      $tentavive='0';
      if($tentative==0)
      {
       $tentative++
       echo "<script type='text/javascript'>function($)$('body').notif({title:'Erreur de connexion', content:'Vos identifiants ne sont pas correct, veuillez les corriger ! Il vous reste 2 tentatives, succes:'error', img:'❌', timeout:60000});</script>";
      }
      if($tentative==1)
      {
       $tentative++
       echo "<script type='text/javascript'>function($)$('body').notif({title:'Erreur de connexion', content:'Vos identifiants ne sont pas correct, veuillez les corriger ! Il vous reste 1 tentative,  succes:'error', img:'❌', timeout:60000});</script>";
      }
      if($tentative==2)
      {
       $tentative++
       echo "<script type='text/javascript'>function($)$('body').notif({title:'Erreur de connexion', content:'Vous pouvez tenter une nouvelle connexion dans 15 minutes,  succes:'error', img:'❌', timeout:60000});</script>";
      }
     }
    }
    elseif($erreur != array())
    {
     if(!empty($erreur['login']))
     {
      echo "<script type='text/javascript'>function($)$('body').notif({title:'Erreur de connexion', content:'Les informations ne sont pas correct, veuillez les corriger !, succes:'error', img:'❌', timeout:60000});</script>";
     }
     if(!empty($erreur['passwd']))
     {
      echo "<script type='text/javascript'>function($)$('body').notif({title:'Erreur de connexion', content:'Les informations ne sont pas correct, veuillez les corriger !, succes:'error', img:'❌', timeout:60000});</script>";
     }
    }
   }
   elseif(isset($_POST['inscription']) && !empty($_POST['inscription']))
   {
    echo 'Inscription impossible';
   }
   elseif(isset($_POST['deconnexion']) && !empty($_POST['deconnexion']))
   {
    echo 'Déconnexion impossible';
   }
  }
 }
 else if($maintenance == 'on')
 {
  echo '<body class="maintenance" valign="middle">';
 }
?>


menu.php 
<div class="menu"><ul>
 <?php
  if($subtitle!='Shoutbox')
  {
   if (isset ($_SESSION['id']) && $_SESSION['id'] != 0)
   {
    if($nbrs_new_msg =='0')
    {
     echo '<li><a href="messagerie.php" rel="nofollow" target="_blank"><img src="img/no-msg.png" title="Vous n\'avez pas de nouveau message privé" alt="('.$nbrs_new_msg.' MP)"/></a></li>';
    }
    else
    {
     if($nbrs_new_msg == '1')
     {
      echo '<li><a href="messagerie.php" rel="nofollow" target="_blank"><img src="img/new-msg.png" title="Vous avez '.$nbrs_new_msg.' nouveau message privé" alt="('.$nbrs_new_msg.' MP)"/></a></li>';
     }
     else
     {
      echo '<li><a href="messagerie.php" rel="nofollow" target="_blank"><img src="img/new-msg.png" title="Vous avez '.$nbrs_new_msg.' nouveaux messages privé" alt="('.$nbrs_new_msg.' MP)"/></a></li>';
     }
    }
    if(!empty($_SESSION['token']))
    {
     echo '<li><a href="mon-compte.php" rel="nofollow" target="_blank">Profil</a></li>';
    }
    if(!empty($_SESSION['token']))
    {
     echo '<li><a href="amis.php" rel="nofollow" target="_blank">Contacts</a></li>';
    }
    if(!empty($_SESSION['token']))
    {
     echo '<li><a href="deconnexion.php" rel="nofollow" target="_blank">Déconnexion</a></li>';
    }
   }
   else
   {
    if($subtitle!='Inscription')
    {
     echo '<li><a href=inscription.php">Inscription</a></li>';
    }
    if(empty($_SESSION['token']))
    {
     echo '<li><a>Connexion</a></li>';
    }
    
   }
   if($subtitle!='Accueil')
   {
    echo '<li><a href="index.php" rel="nofollow" target="_blank">Accueil</a></li>';
   }
   ?><li><a href="shoutbox.php" rel="nofollow" target="_blank" onclick="window.open(this.href); return false;">Shoutbox</a></li><?php
  }
 ?>
 </ul>
</div>
<?php if($subtitle!='Shoutbox') {include 'banner.php';} ?>


no-body.php 
<?php 
 if($maintenance == 'off' and $subtitle != 'Shoutbox')
 {
  include 'copyright.php';
 }
 echo '</body>';
 //*** Fermeture de la base de données ***\\\ include 'close-bdd.php';
 echo '</html>';
?>


style1.css 

html 
{
 margin: 0px;
 padding: 0px;
 width: 100%;
 height: 100%;
}

img
{
 background-position: 50% 50%;
 background-size: auto 100%;
 margin: 0;
 width: 100%;
 height: 100%;
 position: absolute;
}

body.style
{
 overflow-x: hidden;
 margin: 0px;
 padding: 0px;
 font-family: sans-serif;
 width: 100%;
 height: 100%;
 background:url("../img/background.png") repeat 0% 0% fixed;
}

body.shoutbox
{
 overflow-x: hidden;
 margin: 0px;
 padding: 0px;
 width: 100%;
 height: 100%;
 background-color: #444444;
}

body.maintenance
{
 margin: 0px;
 padding: 0px;
 width: 100%;
 height: 100%;
 overflow:hidden;
 background:url("../img/maintenance.png") repeat 0% 0% fixed;
}


.notifications
{
 z-index: 2000;
 position: fixed;
 top: 0; left: 0;
 width: 300px;
 color: #000000;
 background-color: #FFFFFF;
 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #FFFFFF), color-stop(100%, #DBDBDB));
 background-image: -webkit-linear-gradient(top, #FFFFFF, #DBDBDB);
 background-image: -moz-linear-gradient(top, #FFFFFF, #DBDBDB);
 background-image: -o-linear-gradient(top, #FFFFFF, #DBDBDB);
 background-image: -ms-linear-gradient(top, #FFFFFF, #DBDBDB);
 background-image: linear-gradient(top, #FFFFFF, #DBDBDB);
 box-shadow: 5px 5px 10px #000;
}

.notification
{
 cursor: pointer;
 border-bottom: 1px solid #C1C1C1;
 box-shadow: 0px 1px 0px #FFFFFF;
 position: relative;
 font: normal 12px HelveticaNeue, Helvetica, Arial, sans-serif;
 text-shadow(0px 1px 0px #FFFFFF);
}


.notification:last-child
{
 box-shadow: 0px 0px 0px transparent;
 border-bottom: none;
}


h2
{
 font-size: 14px;
 font-weight: bold;
 margin: 0;
 padding: 10px 0;
}

p
{
 margin: 0;
 padding: 0;
 padding-bottom: 10px;
}

.notification-left
{
 position: absolute;
 height: 100%;
 width: 50px;
 top: 0;
 left: 0;
 border-right: 1px solid rgba(0,0,0,0.2);
 padding-right: 10px;
}

.succes
{
 background-color: #63a153;
 color: #FFFFFF;
 font-size: 40px;
 text-align: center;
 text-shadow(rgba(0,0,0,0.4) 0px 1px 0px);
}

.error
{
 background-color: #FA5650;
 color: #FFFFFF;
 font-size: 40px;
 text-align: center;
 text-shadow(rgba(0,0,0,0.4) 0px 1px 0px);
}

.info
{
 background-color: orange;
 color: #FFFFFF;
 font-size: 40px;
 text-align: center;
 vertical-align: middle;
 text-shadow(rgba(0,0,0,0.4) 0px 1px 0px);
 
}


.iconimg
{
 background-position: 50% 50%;
 background-size: auto 100%;
 width: 100%;
 height: 100%;
 position: absolute;
 box-shadow(rgba(0,0,0,0.4) -1px 0px 16px inset);
}

.notification-right
{
 margin-left: 70px;
}

.menu_connect
{
 width: 100%;
 display: block;
 position: absolute;
 margin-bottom:0;
}
.connect
{
 font-size: 12px;
 z-index: 2001;
 text-align: center;
 margin-bottom:0;
 position: relative;
 float: right;
 width: 200px;
 height: 110px;
 display: block;
 margin-top: 25px;
 margin-right: 0px;
 background-color: #8B6C42;
 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, ##8B6C42), color-stop(100%, #E9C9B1));
 background-image: -webkit-linear-gradient(top, #8B6C42, #E9C9B1);
 background-image: -moz-linear-gradient(top, #8B6C42, #E9C9B1);
 background-image: -o-linear-gradient(top, #8B6C42, #E9C9B1);
 background-image: -ms-linear-gradient(top, #8B6C42, #E9C9B1);
 background-image: linear-gradient(top, #8B6C42, #E9C9B1);
 box-shadow: 5px 5px 10px #000;
}

.menu
{
 width: 100%;
 height: 25px;
 position: relative;
 background-color: #444444;
 display: block;
}

.menu ul
{
 float: right;
 position: relative;
 margin: 0px;
 display: block;
 
}

.menu ul li
{
 float: left;
 list-style-type: none;
 position: relative;
 right: 10px;
 display: block;
}
 
.menu ul li a
{
 position: relative;
 height: 25px;
 text-decoration: none;
 color: #ffffff;
 background-color: none;
 text-align: center;
 padding-left: 5px;
 padding-right: 5px;
 display: block;
}
 
.menu ul li a:hover
{
 display: block;
 position: relative;
 color: #ffffff;
 background-color: #666666;
 font-weight: none;
 height: 25px;
}
 
.banner
{
 display: block;
 position: relative;
 background-color: #555555;
 height: 100px;
 width: 100%;
 margin-bottom: 0px;
 text-align: center;
 color: #ffffff;
}
 
.contenu
{
 display: block;
 min-height: 550px;
 max-width: 900px;
 margin: auto;
 background-color: #CCCCCC;
}

.shoutbox
{
 display: block;
 width: 100%;
 margin: auto;
 background-color: #CCCCCC;
} 

.copyright
{
 text-align: center;
 padding-top: 5px;
 background-color: #444444;
 height: 25px;
 width: 100%;
 color: #ffffff;
 position: relative;
 bottom: 0px;
}
 
.copyright a
{
 display: inline-block;
 text-decoration: none;
 color: #ffffff;
 background-color: none;
}
 
.copyright a:hover
{
 color: #ffffff;
 background-color: none;
}


animate.css
<code>
@charset "UTF-8";

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}

@-webkit-keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}

70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}

90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}

@keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}

70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}

90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}

.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}

@-webkit-keyframes flash {
from, 50%, to {
opacity: 1;
}

25%, 75% {
opacity: 0;
}
}

@keyframes flash {
from, 50%, to {
opacity: 1;
}

25%, 75% {
opacity: 0;
}
}

.flash {
-webkit-animation-name: flash;
animation-name: flash;
}

@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}

to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}

to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}

@-webkit-keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}

40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}

50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}

65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
}

75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
}

to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}

40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}

50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}

65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1);
}

75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1);
}

to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}

@-webkit-keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}

20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}

@keyframes shake {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}

20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}

.shake {
-webkit-animation-name: shake;
animation-name: shake;
}

@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}

6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}

18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}

31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}

43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}

50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}

6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}

18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}

31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}

43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}

50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

.headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake;
}

@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}

40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}

60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}

80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}

to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}

@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}

40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}

60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}

80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}

to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}

.swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}

@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

10%, 20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}

30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}

40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}

to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

10%, 20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}

30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}

40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}

to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

.tada {
-webkit-animation-name: tada;
animation-name: tada;
}

@-webkit-keyframes wobble {
from {
-webkit-transform: none;
transform: none;
}

15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}

30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}

45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}

60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}

75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}

to {
-webkit-transform: none;
transform: none;
}
}

@keyframes wobble {
from {
-webkit-transform: none;
transform: none;
}

15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}

30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}

45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}

60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}

75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}

to {
-webkit-transform: none;
transform: none;
}
}

.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}

@-webkit-keyframes jello {
from, 11.1%, to {
-webkit-transform: none;
transform: none;
}

22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}

33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}

44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}

55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}

66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}

77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}

88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}

@keyframes jello {
from, 11.1%, to {
-webkit-transform: none;
transform: none;
}

22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}

33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}

44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}

55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}

66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}

77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}

88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}

.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center;
}

@-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}

20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}

40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}

60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}

80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}

to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}

20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}

40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}

60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}

80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}

to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}

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

75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}

90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}

to {
-webkit-transform: none;
transform: none;
}
}

@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}

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

75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}

90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}

to {
-webkit-transform: none;
transform: none;
}
}

.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}

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

75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}

90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}

to {
-webkit-transform: none;
transform: none;
}
}

@keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}

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

75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}

90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}

to {
-webkit-transform: none;
transform: none;
}
}

.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}

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

75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}

90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}

to {
-webkit-transform: none;
transform: none;
}
}

@keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}

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

75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}

90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}

to {
-webkit-transform: none;
transform: none;
}
}

.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}

60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}

75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}

90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}

to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

@keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}

60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}

75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}

90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}

to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}

50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}

to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}

@keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}

50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}

to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}

.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}

40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}

to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}

@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}

40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}

to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}

.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}

to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}

@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}

to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}

.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}

to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}

@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}

to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}

.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}

40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}

to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}

@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}

40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}

to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}

.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}

to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
from {
opacity: 1;
}

to {
opacity: 0;
}
}

@keyframes fadeOut {
from {
opacity: 1;
}

to {
opacity: 0;
}
}

.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}

@keyframes fadeOutDown {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}

.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}

@keyframes fadeOutDownBig {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}

.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}

@keyframes fadeOutLeft {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}

.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}

@keyframes fadeOutLeftBig {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}

.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}

@keyframes fadeOutRight {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}

.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}

@keyframes fadeOutRightBig {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}

.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}

@keyframes fadeOutUp {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}

.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}

@keyframes fadeOutUpBig {
from {
opacity: 1;
}

to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}

.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}

40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}

50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}

@keyframes flip {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}

40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}

50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

80% {
-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
transform: perspective(400px) scale3d(.95, .95, .95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}

.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}

@-webkit-keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}

40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}

80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}

to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}

@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}

40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}

80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}

to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}

.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}

@-webkit-keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}

40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}

80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}

to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}

@keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}

40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}

80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}

to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}

.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}

30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}

to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}

@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}

30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}

to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}

.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}

30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}

to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}

@keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}

30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}

to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}

.flipOutY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}

60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}

80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
}

to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

@keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}

60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}

80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
opacity: 1;
}

to {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
from {
opacity: 1;
}

to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}

@keyframes lightSpeedOut {
from {
opacity: 1;
}

to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}

.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}

to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

@keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}

to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}

to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

@keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}

to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}

to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

@keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}

to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}

to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

@keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}

to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}

to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

@keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}

to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}

.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}

to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}

@keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}

to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}

.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}

to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}

@keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}

to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}

.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}

to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}

@keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}

to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}

.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}

to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}

@keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}

to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}

.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}

to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}

@keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}

to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}

.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}

20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
21 août 2016 à 18:04
Oula....
il y a pleins de petites choses qui ne vont pas (ou qui mériteraient d'être améliorées) dans ton code...
Déjà : 
isset($_POST['inscription']) && !empty($_POST['inscription'])

Se résume simplement en : 
!empty($_POST['inscription'])

empty s'assure que la variable existe et n'est pas vide.

Ensuite... je vois que tu utilises encore l'ancienne extension mysql consiédérée comme obsolète.... je t'invite vivement à passer à mysqli ou à pdo.
regarde ici : https://www.commentcamarche.net/faq/43261-php-l-extension-mysql-est-obsolete#top
(perso je préfère pdo)

Prends aussi l'habitude d'écrire tes if else... ainsi : 
<?php
if ($expr1) {
    // if body
} elseif ($expr2) {
    // elseif body
} else {
    // else body;
}

Ca rend la lecture plus facile.... (=> Syntaxe basée sur la norme PSR2 disponible ici : https://www.php-fig.org/psr/psr-2/ )

J'ai pu voir que tu avais désactiver l'affichage des erreurs Php... GROSSE ERREUR.... surtout pendant qu'on est en train de coder et que, comme toi, on est capable de faire des oublis de quotes dans des variables....
Donc réactive l'affichage des erreurs ! 
error_reporting(E_ALL);



Pour finir, une fois ta page affichée sur ton navigateur... fais y donc un clic droit puis afficher la source (ou le code source) afin de voir le code GENERE... il serait bien de voir comment s'y présente tes petits blocs de scripts JS dedans...

Il serait bien également que dans tes balises script (là où tu as mis ton code pour générer l'affichage des erreurs....) tu places également un "alert" pour voir si le js s'exécute.
par exemple : 
 alert("Erreur de connexion");

Si l'alert s'affiche c'est que tu passes bien dans tes if et que le javascript s'exécute. Dans ce cas on pourra se pencher pleinement sur le bout de code qui suit.

Il serait bien également que tu nous fasses une capture écran de la console de ton navigateur lorsque ta page est ouverte et que tu devrais (selon toi) voir afficher le message d'erreur.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705 > jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024
21 août 2016 à 18:05
PS: Ta question concernant du code php/javascript .... il n'était pas nécéssaire de nous balancer le css ..... en effet ça fait long....la prochaine fois évite (sauf si on t'y invite :-) )
0

Discussions similaires

Visual Studio Code probleme NPM et Node.js
Damsp94 -
jordane45 -

1 réponse
Scripts d'IKARIAM
nathan0158 -
glatior -

1 réponse
Copyright - Scripts
xtremdream -
Mr -

6 réponses
Scripts VBS
Crysis\ -
Crysis\ -

5 réponses
c'est quoi des scripts
manon -
macto -

3 réponses