J'essaie de faire une transition en survol avec css sur une vignette de sorte qu'en vol stationnaire, le dégradé d'arrière-plan se fane. La transition ne fonctionne pas, mais si je la change simplement en rgba()valeur, cela fonctionne très bien. Les dégradés ne sont-ils pas pris en charge? J'ai aussi essayé d'utiliser une image, cela ne fera pas non plus la transition de l'image.
Je sais que c'est possible, comme dans un autre post quelqu'un l'a fait, mais je ne sais pas exactement comment. Toute aide> Voici quelques CSS pour travailler avec:
#container div a {
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
position: absolute;
width: 200px;
height: 150px;
border: 1px #000 solid;
margin: 30px;
z-index: 2
}
#container div a:hover {
background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}
Réponses:
Les dégradés ne prennent pas encore en charge les transitions (bien que la spécification actuelle indique qu'ils devraient prendre en charge le même dégradé pour aimer les transitions de dégradé par interpolation.).
Si vous voulez un effet de fondu avec un dégradé d'arrière-plan, vous devez définir une opacité sur un élément de conteneur et «transition» l'opacité.
(Il y a eu quelques versions de navigateur qui prenaient en charge les transitions sur les dégradés (par exemple IE10. J'ai testé les transitions de dégradé en 2016 dans IE et elles semblaient fonctionner à l'époque, mais mon code de test ne fonctionne plus.)
Mise à jour: octobre 2018 Les transitions de dégradé avec une nouvelle syntaxe non préfixée [par exemple, gradient radial (...)] sont désormais confirmées pour fonctionner (encore?) Sur Microsoft Edge 17.17134. Je ne sais pas quand cela a été ajouté. Ne fonctionne toujours pas sur les derniers Firefox et Chrome / Windows 10.
la source
Une solution de contournement consiste à modifier la position d'arrière-plan pour donner l'effet que le dégradé change: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/
la source
Une solution consiste à utiliser background-position pour imiter la transition de gradient. Cette solution a été utilisée dans Twitter Bootstrap il y a quelques mois.
Mettre à jour
http://codersblock.blogspot.fr/2013/12/gradient-animation-trick.html?showComment=1390287622614
Voici un petit exemple:
État du lien
État de vol stationnaire
la source
background-size, que vous ne pouvez pas dans IE8. caniuse.com/#search=background-size En dehors de cela, c'est une bonne solution.Pour ce que ça vaut, voici un mixin Sass:
Usage:
@include gradientAnimation(red, blue, .6s);Mixin:
Tiré de ce post génial sur Medium de Dave Lunny: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759
la source
Je sais que c'est une vieille question mais mabye quelqu'un aime ma façon de solution en CSS pur. Fondu dégradé de gauche à droite.
la source
Dans ce qui suit, une balise d'ancrage a un enfant et un petit-enfant. Le petit-enfant a le dégradé de fond lointain. L'enfant dans le fond proche est transparent, mais a le dégradé de transition vers. En vol stationnaire, l'opacité de l'enfant passe de 0 à 1, sur une période de 1 seconde.
Voici le CSS:
Et voici le HTML:
Ce qui précède n'est testé que dans la dernière version de Chrome. Voici les images avant le vol stationnaire, à mi-chemin en vol stationnaire et en transition complète en vol stationnaire:
la source
Une solution de contournement partielle pour la transition de dégradé consiste à utiliser l'ombre de la boîte d'encart - vous pouvez faire la transition soit l'ombre de boîte elle-même, soit la couleur d'arrière-plan - par exemple, si vous créez une ombre de boîte d'encart de la même couleur que l'arrière-plan et que vous utilisez la transition sur la couleur d'arrière-plan, cela crée l'illusion ce fond uni se transforme en dégradé radial
la source
Vous pouvez FAIRE des transitions entre des dégradés, en utilisant des transitions dans l'opacité de quelques dégradés empilés, comme décrit dans quelques-unes des réponses ici:
Animation CSS3 avec dégradés .
Vous pouvez également transférer la position à la place, comme décrit ici:
Transition de dégradé CSS3 avec position d'arrière-plan .
Quelques techniques supplémentaires ici:
Animation des dégradés CSS3 .
la source
Trouvé un joli hack sur codepen qui modifie la
opacitypropriété mais réalise ce fondu d'un gradient à un autre en tirant parti des pseudo-éléments. Ce qu'il fait, c'est qu'il définit une:aftersorte que lorsque vous modifiez l'opacité de l'élément réel, l':afterélément s'affiche de sorte qu'il ressemble à un fondu. J'ai pensé qu'il serait utile de partager.Codepen d'origine: http://codepen.io/sashtown/pen/DfdHh
la source
Sur la base du code CSS dans votre question, j'ai essayé le code comme suit et cela fonctionne pour moi (exécutez l'extrait de code), et veuillez essayer par vous-même:
Sur la base du code CSS dans votre question, j'ai essayé le code comme suit et cela fonctionne pour moi, et essayez par vous-même:
Ça marche pour vous? Changez la couleur en fonction de vos besoins :)
la source
Essayez d'utiliser: avant et: après (ie9 +)
la source
Comme indiqué. Les dégradés ne sont actuellement pas pris en charge avec les transitions CSS. Mais vous pouvez contourner ce problème dans certains cas en définissant l'une des couleurs sur transparent, afin que la couleur d'arrière-plan d'un autre élément d'habillage transparaisse, et la transition à la place.
la source
J'utilise cela au travail :) IE6 + https://gist.github.com/GrzegorzPerko/7183390
N'oubliez pas
<element class="ahover"><span>Text</span></a>si vous utilisez un élément de texte.la source
Je ne peux pas faire de mal à publier une autre vue car il n'y a toujours pas de moyen officiel de le faire. A écrit un plugin jQuery léger avec lequel vous pouvez définir un dégradé radial d'arrière-plan et une vitesse de transition. Cette utilisation de base le laissera ensuite apparaître, optimisé avec requestAnimationFrame (très fluide):
http://codepen.io/Shikkediel/pen/xbRaZz?editors=001
Conserve l'arrière-plan d'origine et toutes les propriétés intactes. A également le suivi des hautes lumières comme paramètre:
http://codepen.io/Shikkediel/pen/VYRZZY?editors=001
la source
Je voulais qu'un div apparaisse comme une sphère 3D et une transition à travers les couleurs. J'ai découvert que les couleurs d'arrière-plan dégradées ne font pas (encore) de transition. J'ai placé un arrière-plan dégradé radial devant l'élément (en utilisant l'indice z) avec un arrière-plan solide en transition.
puis le
div.balldessous:puis changé la couleur de fond du
div.ballet le tour est joué!https://codepen.io/keldon/pen/dzPxZP
la source