I am trying to make some text fade to a new colour and then back to it's original colour.
#sidebar2:target .phonenumber {
-o-transition:0.7s;
-ms-transition:0.7s;
-moz-transition:0.7s;
-webkit-transition:0.7s;
transition:0.7s;
color: yellow;
}
Currently it just goes to the new colour and stays like that. How can I adapt this code so that is does what I want? Any help is appreciated!
EDIT:
I am using :target so that when a user clicks on a same page link, the part of the text that I'm linking to is highlighted. I would like the text to fade to a different colour and then back again
I'm fairly certain it is not possible to loop a transition, you are able to transition from one state to another but not back again in a single transition.
To achieve the result you are looking for you would use an animation instead.
First set up the animation keyframes:
#keyframes glowyellow {
0% { color: auto; }
50% { color: yellow; }
100% { color: auto; }
}
Then to use this on your element:
#sidebar2:target .phonenumber {
animation: glowyellow 1.4s linear;
}
Use vendor prefixes to support browsers as you are doing in your example.
Here is a fiddle as an example.
Do you mean something like this?
Demo
span {
color: #000;
transition: color 1s;
/* Not using proprietary codes here, you can add it if you need */
}
span:hover {
color: #aaa;
}
8 years late, but there is a "psudo-selector" for visited links: :visited
(It's actually a pseudo class)
Just modify the attributes you want from there. No need for animation and transitions.
Related
I am animating a button. A class is assigned depending on my app state. This is actually implemented in Svelte as follows:
<div class="default"
class:run-animation="{$animate === true}">
But the equivalent in vanilla javascript without Svelte is:
let element = document... (find element)
element.classList.add("run-animation")
... later ...
element.classList.remove("run-animation)
For the sake of a minimum reproducible example, the classes I'm trying to animate/transition between look like this:
.default {
top: 20px;
color: white;
}
#keyframes button-animation {
from {
top: 20px;
color: white;
}
20% {
top: 23px;
color: white;
}
25% {
color: red;
}
100% {
top: 23px;
color: red;
}
}
.run-animation {
animation-name: button-animation;
animation-duration: 2s;
/* Preserve the effect of the animation at ending */
animation-fill-mode: forwards;
}
I add the class to the element, and the button animates just like I want it to. My problem arises when I remove the class. I want the button to transition smoothly back to the default CSS. I have tried adding the animation to the run-animate class:
.run-animation {
animation-name: ... ;
top: 23px;
color: red;
}
I have come across many people stating the transition upon class removal will apply if I add a transition property to the default class. I have tried this as follows:
.default {
...
transition: all 3s linear;
}
But it isn't working. The animation runs smoothly when it is added but the styling immediately reverts to the default when the class is removed (no smooth transition).
MY GOAL: I want to smoothly transition away from the end-state of the animation to the default class when the animate class is removed. Is this possible?
Ideally, I'm adding the class with the Svelte logic at the top so the animation should not be triggered in javascript but rather naturally occur as a result of class assignment.
(My code in practice is a little more complicated than shown, the button has another class with styles not being animated at all and the animation includes more styles such as box-shadow and text-shadow. Still, I don't see why this should be more problematic than just color and top included above)
// JS only toggles '.animation'
document.querySelector("button").addEventListener("click", () => {
document.querySelector("div.default").classList.toggle("animation");
});
body {display: flex}
button {position: absolute; left: 120px}
div.default {
position: absolute;
width: 100px;
height: 100px;
background: darkgreen;
}
/* Above code to make a visible working example */
div.default {
top: 20px;
color: white;
transition: top 0.4s, color 0.1s 0.4s;
}
#keyframes define-animation {
from {
top: 20px;
color: white;
}
}
div.default.animation {
animation-name: define-animation;
animation-duration: 2s;
top: 24px;
color: red;
}
<div class="default">I'm colourful</div>
<button>Toggle ".animation"-class</button>
Above is a working snippet with an animation running on class addition and no reverse transition on class removal. I have tried setting animation direction to opposite values in .default and .animation. I have tried defining the .animate end state properties in the class and/or in the keyframes to attributes.
EDIT: It works now! How?
You cannot apply:
animation-fill-mode: forwards;
The end-attributes need to be defined in the animate class not in the keyframe.
The animation plays when the class is added. Transition timings are used when the class is removed (if the animation has completed).
To get a transition effect, you can use the transition-property.
The transition-property can be used here, since every property you want to animate only has a start- and end-value.
Translating animation-percentages to seconds
To translate the percentages of your CSS Animation button-animation to seconds, you just calculate 'percentage' * 'animation-duration'.
This works for both the transition-duration-property as well as for the transition-delay-property.
Example:
color is being animated from 20% to 25%, which is a duration of 5% with a delay of 20%.
All in all, the animation should take 2 seconds.
So we calculate for:
transition-duration: 5% * 2s = 0.1s
transition-delay: 20% * 2s = 0.4s
With that, we can add transition: color 0.1s 0.4s to the .default-class.
Why add it to .default, and not to .animation?
If we were to add the transition-property to .animation, the following would happen:
When adding .animation, there will be a transition-effect, since the element now has a transition-property defined.
But when removing .animation, the element would no longer have a transition-property defined, meaning there would be no transition.
Now, we want to transition on both adding and removing .animation, meaning we want to have a transition-property defined both when .animation is present and when it is not. That means, transition should not be defined in .animation.
// JS only toggles '.animation'
document.querySelector("button").addEventListener("click", () => {
document.querySelector("div.default").classList.toggle("animation");
});
body {display: flex}
button {align-self: center}
div.default {
position: relative;
border: 2px solid black;
width: 100px;
height: 100px;
background: darkgreen;
}
/* Above code to make a visible working example */
div.default {
top: 20px;
color: white;
transition: top 0.4s, color 0.1s 0.4s;
}
div.default.animation {
top: 23px;
color: red;
}
<div class="default">Some text to see the "color"-property</div>
<button>Toggle ".animation"-class</button>
Why does it behave differently...
...when placing the properties inside the to-section of the animation, than when placing them inside .animation itself?
That is, because the properties are not directly applied to the element itself, but rather the element is stopped in its animation (right at the very end), giving only the appearance of the properties being actually applied.
Removing animation-fill-mode: forwards shows the actually applied properties after the animation has played. Those actually applied properties will be the start-values for transition after .animation is removed.
When defining these properties in .animation, they will inherently be the to-values for the animation (if not defined otherwise in animation itself), and be the applied properties of the element.
That means, when removing .animation, the transition will start from there.
I want to make a cursor that when you click, will change to one frame, then 0.5 seconds later, to the next, then back to how it before you clicked. The reason I need it to be css is that I am working on a css only project. I have tried using transition-delay, but you can't have multiple delays on the same property. I can make a cursor change to one frame when clicked, but no more. Here is the code for that:
body {
cursor: url(https://lh3.googleusercontent.com/BlETOnm98yPP5xCHbkFiFREFHNTQqucd_kFkfkYNKKnNohHvvnM7NTlLFq3rAukha0q-JEkouEgvfZnHkrhrzGIaps33RSJOuDV-_NiaPwSfn_cYbp5ayvFkYo4idwDkm-yb1G_jEwpY1zbrNtunux_oGFV-ADsdBVkK5qFqxj5OXMt3Qyw5GDkLgf5cdBHCK91go-7TkV8gT3zwbSWT8gi5tgFkY3UhyTM_X8E0FOU7uLOYBYDlTrEiIuIgqPEWOaj5MbH0j1j871KiLY65x4UsadJDzkpjT3mbfXgoMfDu4p3bE_I9a3Ck2MZq76RxKTH4iDHNwyz2hA0E0BXh2tsoq3mBQEH0h5ywIEDpNqMMQQ1HD33jfqX6TxZT48R6dGso6s4yGruWrMhn4CEwbvuNhOQYEO_r9e8WsIurKqU9bZ7Uiy3YdEtzgKG-sXHV5wJZQv8G0sr-utR9Cu8EzoYBHNdC2Yh-2eE8MAM0yS_15zKp-7igRo9RNhA_0TUkDgb8c4DQ4nC91VfylAA-elZKZtxDySI9U1ZCou1F8q42HJdD8A62CODQ2tlLJ3GMILtXQMM-T_JLhKzzg7gaTk8o9-E3pC5WVyh-yN9dSS-7sUqDBtUUF4bPWgg1WN2CbcJKXzDre_fBkw8hQ5Hzy_2Gp2LoMeSFB1c=s25-no), auto;
}
body:active {
cursor: url(https://lh3.googleusercontent.com/pg5NgqvH-ljQhDjHXV3EHSdX9jYo3_DP2S5r72qH53KZgHjLXBWZb5exYINk7zGA0Xl05TJ4vRdj6Yx1M4gNwLy4jDCjZ_ihsnmO_qDIh5GSxdemoWioqsNjBuR2dyhHy72bToMwv4XRm8a9Rul2hkh9WgpcFRgA8UDPV_D_wCOvxVw6QN6bR472ZQdjCy0QKvHmuzCbuTFnrMCScHJf8OiqJcjhlk04yvaeigm_TJgM8AAgcqtiMJ1MYH5ebI9O34-8HxSPrME47y_9jEN_RSgTPbKD77izoxx531jwIkYbJ5_bSD6NMFDsrub1hlmzexjblGs9bkoC8rbINmCHuUo-zHZaRW3cWkpx-tI4-XjVIgEeoDcwaL0IDOZop2t9aUfbmZQxng-kYVlNzSRwfkWwjAqwJJsS_68T7e7-W_mF1qbdL2BVbihpf8Vy7-8uXYlvHZbiqeiFfEsofThcGWopj8QwXN7Wqo4I8qX0bC7zJrao3UAFVwQ9ox80sWqeIXwJL4NoJs71x_v2GBPdFF74tyMptSL23oLv0c3PNREa2wkqxL1TFpg2VhwTFJRf=s25-no), auto;
}
I dont know what you exactly tried to achieve but this may help with what you try to do:
I basically used a keyframe to animate the other cursor and made the animation 2s so that it will turn back again to the state before.
body {
cursor: url(https://lh3.googleusercontent.com/BlETOnm98yPP5xCHbkFiFREFHNTQqucd_kFkfkYNKKnNohHvvnM7NTlLFq3rAukha0q-JEkouEgvfZnHkrhrzGIaps33RSJOuDV-_NiaPwSfn_cYbp5ayvFkYo4idwDkm-yb1G_jEwpY1zbrNtunux_oGFV-ADsdBVkK5qFqxj5OXMt3Qyw5GDkLgf5cdBHCK91go-7TkV8gT3zwbSWT8gi5tgFkY3UhyTM_X8E0FOU7uLOYBYDlTrEiIuIgqPEWOaj5MbH0j1j871KiLY65x4UsadJDzkpjT3mbfXgoMfDu4p3bE_I9a3Ck2MZq76RxKTH4iDHNwyz2hA0E0BXh2tsoq3mBQEH0h5ywIEDpNqMMQQ1HD33jfqX6TxZT48R6dGso6s4yGruWrMhn4CEwbvuNhOQYEO_r9e8WsIurKqU9bZ7Uiy3YdEtzgKG-sXHV5wJZQv8G0sr-utR9Cu8EzoYBHNdC2Yh-2eE8MAM0yS_15zKp-7igRo9RNhA_0TUkDgb8c4DQ4nC91VfylAA-elZKZtxDySI9U1ZCou1F8q42HJdD8A62CODQ2tlLJ3GMILtXQMM-T_JLhKzzg7gaTk8o9-E3pC5WVyh-yN9dSS-7sUqDBtUUF4bPWgg1WN2CbcJKXzDre_fBkw8hQ5Hzy_2Gp2LoMeSFB1c=s25-no), auto;
}
body:active {
animation: cursor 2s;
}
#keyframes cursor{
from{
}
to{
cursor: url(https://lh3.googleusercontent.com/pg5NgqvH-ljQhDjHXV3EHSdX9jYo3_DP2S5r72qH53KZgHjLXBWZb5exYINk7zGA0Xl05TJ4vRdj6Yx1M4gNwLy4jDCjZ_ihsnmO_qDIh5GSxdemoWioqsNjBuR2dyhHy72bToMwv4XRm8a9Rul2hkh9WgpcFRgA8UDPV_D_wCOvxVw6QN6bR472ZQdjCy0QKvHmuzCbuTFnrMCScHJf8OiqJcjhlk04yvaeigm_TJgM8AAgcqtiMJ1MYH5ebI9O34-8HxSPrME47y_9jEN_RSgTPbKD77izoxx531jwIkYbJ5_bSD6NMFDsrub1hlmzexjblGs9bkoC8rbINmCHuUo-zHZaRW3cWkpx-tI4-XjVIgEeoDcwaL0IDOZop2t9aUfbmZQxng-kYVlNzSRwfkWwjAqwJJsS_68T7e7-W_mF1qbdL2BVbihpf8Vy7-8uXYlvHZbiqeiFfEsofThcGWopj8QwXN7Wqo4I8qX0bC7zJrao3UAFVwQ9ox80sWqeIXwJL4NoJs71x_v2GBPdFF74tyMptSL23oLv0c3PNREa2wkqxL1TFpg2VhwTFJRf=s25-no), auto;
}
}
Maybe playing around with this will help you find your way to what you want to make.
Using #keyframes (and animation) to animate a color does not work in Chrome.
Demo: https://jsfiddle.net/ed3pypwr/
In Chrome the link stays blue. In Firefox it goes from red to green as expected. On a div it works fine in Chrome as well.
Is there any way to solve this?
EDIT
I know it should be prefixed with -webkit- to ensure maximum compatibility, but this is not the issue here. It does not work anyway.
EDIT 2
A solution would be to put the link in a wrapper and use currentColor: https://jsfiddle.net/b84gttu6/. Is there a better way ?
Old versions (<43) of Chrome use the prefixed #-webkit-keyframes instead of the standard #keyframes. So full support would look like this:
#-webkit-keyframes test
{
from { color: red; }
to { color: green; }
}
#keyframes test
{
from { color: red; }
to { color: green; }
}
Update:
I've been doing some tests with various different methods and it works only if the link has not been visited (why, I don't know).
Example
I'm trying to achieve an effect like on this website, http://www.trask-industries.com/#/media, when the content is hovered over it a yellow colour consumes it and the colour of the header changes. When I attempted to re-create this effect my headers become unreadable. jsfiddle.net/m8Z25
.content1:hover, .content2:hover, .content3:hover, .content4:hover, .content5:hover, .content6:hover
{
background-color: white;
opacity: 0.30;
transition: .2s;
webkit-transition: .2s;
-webkit-transition: all 500ms ease;
}
h1:hover
{
color: black;
}
h2
{
color: red;
position:absolute;
bottom: -10;
padding-left: 30;
}
h1
{
color: black;
}
it is not 100% clear what you are trying to achieve here...
From what I can tell. it becomes nearly un-readable because you are adding opacity to the content container. This affects all content (including the background) so everything get faded.
It depends what you have behind the content containers (your sites background).
The site you demo-ed does not use the opacity to change anything. I imagine it just changes the background colour from a lighter purple to darker purple
try removing the opacity:0.30; and updating the background/text colours instead.
see This jsFiddle for an example of just changing colours vs using opacity...
I need to change the background-color from red to transparent.
This change should occur when I hover over a div.
The reason is why I need it transparent is so I can show an absolute positioned div under the main div, in other words, when I hover over the parent div, I need to show the child div.
When I move away the cursor from this div, I don't want a reverse-transition, I want the background to stay transparent, I want the blue div to always be there after I move away the cursor.
Since I need a PURE CSS solution (No JS/JQuery), I came into the CSS3 Transition.
<div id="parent">
<div id="child">
</div>
</div>
This is a fiddle (Firefox).
#parent
{
background:red;
-moz-transition:background 1s;
}
#parent:hover
{
background:transparent;
}
I thought about doing this with animation, since I can fake this by giving it a temporary duration to stay transparent, for example.
0% {background:red;}
1% {background:transparent;}
100% {background:transparent;}
But then animation will stop when I move the cursor away.
Note: This may sound ridiculous or stupid, but my intention is bigger than this, this is just one small example.
Take a look at the transition-delay property.
#parent { transition-delay:999999s; }
#parent:hover { transition-delay:0s; }
Fiddle
This way, the hover animation will happen instantly (0s) while the transition to the initial state will only happen after 277 hours without leaving the page. You can increase the value a bit further if necessary, though I believe this value is enough for a real world page. =]
I don't think it's possible with pure CSS. As a compromise you can use JavaScript to add a class to the element and then handle all visuals with CSS.
http://jsfiddle.net/ZvcgP/1/
HTML
<div class="effect">Hover me</div>
CSS
.effect {
background-color: red;
-webkit-transition:background 1s;
transition:background 1s;
}
.effect.anim-done {
background-color: transparent;
}
JS
$('.effect').mouseenter(function () {
$(this).addClass('anim-done');
});
use below code to transiton from red to transparent. and please change 'object' to the class of your object
.object {
background-color: red;
-webkit-transition:background-color 1s linear; /* for webkit supported browsers */
-moz-transition:background-color 1s linear; /* for old mozilla browsers */
-o-transition:background-color 1s linear; /* for opera browsers */
transition:background-color 1s linear; /* for css3 supported browsers */
}
.object:hover {
background-color: transparent;
}