How to set transition none for a specific css property [duplicate] - html

This question already has answers here:
How do I apply CSS3 transition to all properties except background-position?
(6 answers)
Closed 1 year ago.
I have an element with the transition property
// app.css
.myBtn{
width: 100px;
transition: all 6s ease-out;
background: blue;
}
.myBtn:hover{
width: 300px;
background-color: green;
}
Now, I want to set transition:none only for background-color property.
Note: I cannot change app.css file code, I have to write on some other file.
Any helpful answer will be appreciated.

I think you could override the transition property value leaving out background but you would have to specify each property you do want to transition.
.myBtn{
transition-property: width, height... etc;
}

Related

Is there a way to make a GIF animation not just suddenly revert when using :hover classes in CSS?

I have a simple div element in my HTML, I have set the background-image property to a still image but used the :hover class to change the background-image property to an animated GIF, this works fine for my purposes but when the user leaves the element (stops hovering) the GIF stops and is immediately replaced by the still image, looking a bit displeasing.
I assume this would require JavaScript or jQuery to handle which I'm fine with but if there is any other easier ways that can be implemented into the CSS itself that would be great.
Thanks
jsfiddle: https://jsfiddle.net/nxt5ktc1/
my example itself: drawdeloop.co.uk
header .headerButtonNav {
background-image: url('../Images/Icons/ringUnglow100100.png');
background-size: cover;
width: 50px;
height: 50px;
position: absolute;
right: 50px;
top: 60px;
}
header .headerButtonNav:hover {
background-image: url('../Images/Resources/circleCrossButton400400.gif');
}
You could add a transition to your .headerButtonNav to make it feel more 'smooth'.
I've updated your Fiddle to see what I did: https://jsfiddle.net/nxt5ktc1/1/
Why don't you use CSS transition property?
For example:
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
Try insert images in html code and hidden their (display: none), that would they can loading before

Why is this CSS transition not working as intended? [duplicate]

This question already has answers here:
How to have multiple CSS transitions on an element?
(9 answers)
Closed 7 years ago.
I have a submit button in a form and I'm trying to make a simple on-hover transition. I want it to Swap the colors of the button's text and the button's background color. The way I have it right now, the text successfully transitions over time, but the background color is still switching colors instantly. How do I fix this to make the background color also change over time? I am using Google Chrome, so I only put in the -webkit-transition. Once I get this working I'll add the others for other browsers.
Here's my simplified code:
<form method="post" action="processRegistration.php">
<input class="submitbutton" type="submit" name="submit" value="Create Account" />
<form>
CSS:
#signupform
form
.submitbutton {
margin: 0 auto;
border-radius: 5px;
border: solid 2px #66cc66;
background-color: #66cc66;
color: white;
-webkit-transition: background-color 1s;
-webkit-transition: color 0.5s; }
#signupform
form
.submitbutton:hover {
background-color: white;
color: #66cc66;
-webkit-transition: background-color 1s;
-webkit-transition: color 0.5s; }
http://jsfiddle.net/ewkruuk3/
This is because you are declaring the transition twice. You are basically overriding the first transition with the second one. In CSS if there are two of the same rules, the last one applies. You have to seperate both by a comma in one declaration.
transtion: color .5s, background-color 1s;
Ideally though your css can be simplified to the following:
.submitbutton {
// Other rules
background-color: #66cc66;
color: white;
-webkit-transition: background-color 1s, color 0.5s;
transition: background-color 1s, color 0.5s; // Include this for browser compatability
&:hover {
background-color: white;
color: #66cc66;
}
}
You don't need a transition on :hover as the transition in the parent rule will also apply.

CSS 3 - Get transition on property : display

i got a little question when using the transition-effect with the property display:
I am testing on Safari:
input.input_field {
display:none;
transition-property: display;
transition-duration: 2s;
-webkit-transition-property: display; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
}
input.input_field_active {
display:block;
}
But this example doesnt work for now, anybody knows why i cant use the the property : display??
Greetings!
You can only perform a transition on a scalable property, i.e. a numerically defined property (which may or may not have units of measurement) which exists within a range for which any two points are related. The reason for this is that in order to perform a transition the browser takes the starting point and ending point provided then extrapolates the interim keyframes- producing the resulting animation.
The display property is not scalable, it is simply 'on' or 'off', indeed more specifically it has a number of properties which arent related on any form of scale. As such, the interim values cannot be extrapolated. You can also look at it like this, display is also a layout and not visual style- although it does have visual connotations. You can only perform transitions on visual styles.
Depending on what your requirements are, you can perform a transition on opacity or height (or width).
Demo Fiddle of alternate transitions
You can use a combination of visibility in place of display and the use opacity as a fade effect.
visibility is transtionable although it also only has an on / off state BUT you can use a transition delay to affect it.
JSFiddle Demo
HTML
<button>Hover</button>
<div class="wrap">
</div>
CSS
.wrap {
width:100px;
height:100px;
border:1px solid grey;
background-color: #bada55;
margin-top: 25px;
visibility:hidden;
opacity:0;
transition: visibility 0s linear 0.5s,
opacity 0.35s linear;
}
button:hover + .wrap {
visibility:visible; /* show it on hover */
opacity:1;
transition-delay:0;
}

CSS image overlay delay display:none to display:block [duplicate]

This question already has answers here:
How can I delay a :hover effect in CSS?
(3 answers)
Closed 9 years ago.
I have an image with a button on it. The button will only be visible, if I hover over the image.
I change it from display:none to display:block and it appears instantly.
I would like to delay the appearance of this button by 1 sec or make it appear linear, so it's a smooth transition. I saw the CSS3 transition property and applied this, by using opacity, too (0.0 to 1.0).
It seems not to be working. What am I missing? I don't think the -webkit specific properties are the reason.
Check out my fiddle.js example:
Fiddle.js: Image hover over overlay transition example
Thank you!
Here is a working fiddle
I have use all instead of opacity, but either way you can change that too.
.image_controls{
position: absolute;
left: 0;
top:5px;
opacity:0.0;
}
.image_wrapper:hover .image_controls {
-webkit-transition: all 2s ease;
transition: all 2s ease;
display: block;
opacity:.9;
}
You could use jQuery's fadeIn() / fadeOut(). As you tagged javascript and jquery, I guess using JS would not be a concern for you, right?

Fluidly stop a CSS3 Animation halted mid-animation? [duplicate]

This question already has answers here:
css3 animation on :hover; force entire animation
(7 answers)
Closed 8 years ago.
I'm running into a small problem attempting to have an animation stopped mid-animation gracefully returning to the default state. I'm applying an animation to a child element using the :hover pseudoclass on a parent element, but would like the animation to gracefully return to the default state when I stop hovering on the element. I'm getting the feeling that I shouldn't be using the :hover pseudoclass here and there's another method of approaching it, but I can't seem to figure out how to get it to transition off. It just instantly reverts to the base state, which of course makes sense because the animation is being stripped - but that's not the desired effect. This is the current HTML:
<div id="el1">
<div class="child"></div>
</div>
and the current CSS
#el1 {
margin-top: 100px;
position: relative;
background: transparent url(./image.png) no-repeat;
height: 100px;
width: 100px;
}
#el1 .child {
height: 100%;
width: 100%;
background-color: white;
opacity: 0;
}
#el1:hover .child {
-webkit-animation-name: semiopacity;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 0.5s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes semiopacity {
from { opacity: 0; }
to { opacity: 0.4; }
}
To recap: There's a flashing white effect over the image when hovering. I want it to animate back to the original keyframe when I stop hovering instead of snapping back to "off". I can change either the HTML or CSS; no restrictions on how to make it work.
css3 animation on :hover; force entire animation
Something similar asked a couple days ago. This person also wanted their entire animation to show after hover was removed. Check it out.