Comment créer des transitions avec CSS 3

category Internet & médias sociaux / Web design & développement / Conception iPhone & iPad web

CSS 3 vous donne de nombreuses fonctionnalités intéressantes pour créer des effets sympas dans la conception de votre site Web pour l'affichage sur l'iPad et l'iPhone. Les propriétés CSS 3 de transition permettent de modifier l'état d'un élément. Utilisation de transitions, vous pouvez faire des choses comme modifier la couleur d'un élément ou de faire disparaître le texte quand quelqu'un tape dessus.

Utilisation de transitions, vous pouvez provoquer un élément pour agrandir quand il est touché (ou cliquée), mais CSS 3 a ses limites. Après la grande image est agrandie, comme le montre cette figure, vous avez aucun moyen de fermer, sauf si vous combinez CSS 3 avec javascript.

image0.jpg

La webkit-transition comprend plusieurs propriétés. (Note: Si plusieurs options sont spécifiées, chacun est appliquée dans l'ordre indiqué).:

  • -webkit-transition-propriété - Indique quelle propriété, tels que la couleur du texte, la transition affecte.




  • -webkit-transition-durée - Indique le nombre de secondes jusqu'à ce que la transition se produit. La durée peut être exprimée en tant que seconde 1S, 2S, et ainsi de suite, ou en millisecondes, par exemple 500 ms, 250 ms, et ainsi de suite.

  • -webkit-transition-delay - Indique tout retard avant le début de la transition. Par exemple, vous ajoutez un délai de trois secondes en incluant webkit-transition-delay: 3s.

  • -webkit-transition-timing-function - Indique la courbe de vitesse d'une transition et vous permet de modifier la vitesse sur la durée d'une transition en précisant autant que cinq valeurs prédéfinies:

  • facilité - La valeur par défaut à valeur crée un effet de transition qui commence lentement, se développe rapidement, puis ralentit à nouveau

  • linéaire - Crée une transition à la même vitesse de bout en bout.

  • facilité dans - Crée une transition qui commence lentement.

  • facilité sur - Crée une transition qui se termine lentement.

  • facilité in-out - Crée une transition qui commence et se termine lentement.

  • cube-Bézier - Une option avancée qui permet de définir votre propre valeurs- une fonction, sur la base de la courbe de Bezier qui a été utilisé dans l'infographie depuis les années 1960, utilise une séquence de valeurs numériques de 0 à 1.

Articles Similaires

A propos Auteur
Choisir transitions des diapositives PowerPoint dans Office 2011 pour Mac Choisir transitions des diapositives PowerPoint dans Office 2011 pour Mac

Dans PowerPoint 2011 pour Mac, transitions sont des effets qui ajoutent animation ou le son au mouvement du changement entre une diapositive et une autre, en fonction de la transition style que vous choisissez. Il est important de se rappeler que…

Comment appliquer les transitions de diapositives dans PowerPoint sur l'iPad Comment appliquer les transitions de diapositives dans PowerPoint sur l'iPad

Dans PowerPoint jargon, un transition est un peu de drame qui se produit entre les diapositives. Vous pouvez les appliquer à la présentation sur votre iPad. Transitions comprennent la lingette, fondu, Split, et le flash. Plutôt que d'apparaître…

Comment appliquer une transition aux diapositives dans PowerPoint Comment appliquer une transition aux diapositives dans PowerPoint

Transitions dans PowerPoint 2013 sont les mouvements d'une diapositive à l'autre. L'effet de transition par défaut est Aucun, ce qui signifie la diapositive va tout simplement loin et la suivante apparaît. Certains des alternatives comprennent…

Comment modifier les options de transition dans PowerPoint 2,013 Comment modifier les options de transition dans PowerPoint 2,013

Différentes transitions dans PowerPoint 2013 ont différentes options disponibles. Certaines des transitions sont de nature directionnelle, de sorte que vous aurez un choix de quelle manière la transition se déplace. La direction pourrait être…

Comment créer un powerpoint 2,013 transition de diapositive Comment créer un powerpoint 2,013 transition de diapositive

UN transition Voilà comment PowerPoint 2,013 obtient d'une diapositive à l'autre au cours d'un diaporama à l'écran. La façon normale de enchaîner d'une diapositive à se coupant simplement à la nouvelle diapositive - efficace, oui, mais aussi…

Comment utiliser CSS3 animation de transition Comment utiliser CSS3 animation de transition

Il est déjà possible de modifier les propriétés de CSS à la volée par les pseudo-classes (comme hover) ou avec du code javascript. Avant de CSS3, tous les changements d'état de CSS est passé instantanément. Avec la nouvelle transition…

Comment utiliser les classes de transition dans javafx Comment utiliser les classes de transition dans javafx

JavaFX est livré avec huit effets d'animation prédéfinis - surnommé classes de transition - que vous pouvez utiliser pour créer facilement une animation sur la plupart des noeud dans votre graphe de scène. (La plupart des transitions allons…

Pour les aînés: comment ajouter des transitions à une diapositive PowerPoint Pour les aînés: comment ajouter des transitions à une diapositive PowerPoint

Les effets de transition sont un peu comme des animations, sauf qu'ils appliquent aux diapositives PowerPoint entières. Un effet de transition est la fanfare qui se produit lorsque vous transition entre une diapositive à l'autre. L'effet de…

Comment animer les transitions dans l'application Keynote pour iPad Comment animer les transitions dans l'application Keynote pour iPad

Dans l'application Keynote pour l'iPad, vous pouvez contrôler la transitions entre les diapositives - qui est, comment la présentation se déplace d'une diapositive à l'autre. Transitions ajouter un peu de style à votre présentation Keynote,…

Comment construire des transitions dans Keynote pour iPad Comment construire des transitions dans Keynote pour iPad

Vous pouvez animer une présentation Keynote sur votre iPad et en faire un meilleur outil de communication en utilisant des animations de Keynote pour animer la transition que vous passez d'une diapositive à l'autre.Appuyez sur une diapositive,…

Comment faire la transition avec CSS3 Comment faire la transition avec CSS3

Parlez de puissantes nouvelles fonctionnalités dans des feuilles de style en cascade (CSS): En associant le : hover pseudo-classe avec la propriété de transition CSS3, vous pouvez ajouter des fonctionnalités interactives slicks à vos objets…

Comment créer des animations avec des images clés Comment créer des animations avec des images clés

Pour créer des effets animés sur votre site Web à afficher sur l'iPad et l'iPhone, vous devez utiliser des images clés. Plus complexe CSS 3 animations comptent sur les images clés. Les images-clés sont les points dans une animation où quelque…

Assurez CSS 3 travailler dans d'autres navigateurs web Assurez CSS 3 travailler dans d'autres navigateurs web

Si vous souhaitez utiliser HTML5 et CSS 3 dans la conception de votre site Web, vous devez savoir que les deux HTML5 et CSS 3 sont encore en cours de développement. La spécification CSS n'a pas encore été approuvé par le W3C, mais de nombreux…

Comment ajouter des transitions à votre projet iMovie 09 Comment ajouter des transitions à votre projet iMovie 09

iMovie 09 vous permet d'ajouter des transitions à vos projets iMovie. iMovie comprend une étonnante palette de transitions, y compris les vieux favoris (comme Fade In et dissoudre) et des trucs astucieux vous pourriez ne pas être familier avec…

» » » » Comment créer des transitions avec CSS 3