This question already has answers here:
How to keep styles after animation?
(2 answers)
Closed 1 year ago.
I'm trying to make it such that when an <input> is focused, the input bar width stretches past a button. It works, but for some reason it won't stay stretched (it resumes its initial width).
What am I doing wrong?
Heres a fiddle: https://jsfiddle.net/v4bu0k8j/
CSS:
#main {
display:flex;
position:relative;
}
#txt {
width:125px;
position:absolute;
z-index:2;
}
#btn {
margin-left:140px;
position:absolute;
z-index:1;
}
#keyframes widen {
0% {
width:125px;
}
100% {
width:300px;
}
}
.openSearch {
-webkit-transition: widen .5s ease-in;
-moz-transition: widen .5s ease-in;
-o-transition: widen .5s ease-in;
animation: widen .5s ease-in;
}
Javascript
const search = document.getElementById("txt");
search.addEventListener("focus", event => {
search.classList.add("openSearch");
});
Try adding ~ animation-fill-mode: forwards;
.openSearch {
-webkit-transition: widen .5s ease-in;
-moz-transition: widen .5s ease-in;
-o-transition: widen .5s ease-in;
animation: widen .5s ease-in;
/* Try adding this */
animation-fill-mode: forwards;
}
Related
In my agency's website, the buttons on the homepage have a small delay between hovering and I don't know what's causing this behaviour. Could you guys take a look?
Aparticula
This is the code applied to it
.btn span {
position: absolute;
top: 2px;
left: 2px;
width: 196px;
height: 34px;
background: #fff;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
Please help!
That because you have applied transition to all
Remove this from your css
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
Transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately.
For better understanding, check this out :
.box {
width: 150px;
height: 150px;
background: #914969;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: #ff9999;
cursor: pointer;
<div class="box">Transition effects</div>
For the most part, the order of the values does not matter -- unless a delay is specified. If you specify a delay, you must first specify a duration. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay.
Some properties cannot be transitioned because they are not animatable properties. See the spec for a full list of which properties are animatable.
Hope this helps..!
I am new to jQuery & javascript and making a simple slider by adding and removing class 'active' on next slide which is working fine but seems ugly because there is no animation. Is there any way to animate the process of adding and removing a class? Like:
$('#next').on('click', function(){
$('div.active').removeClass('active', duration: 500ms).next().addClass('active', duration: 500ms);})
At Jquery documentation website I have seen that there is an animate function which is used to animate things. Is it possible to use that function in my case?
Update: I have also tried to apply the CSS transition on div and div.active which is not working.
Css:
.slider div {
display: none;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
div.active {
display: inline-block;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
From comments of different users I came to know that css transition can not be applied on display: none elements. So instead of display none I applied height 0px; opacity: 0; which worked fine for me.
.slider img{
height: 0px;
opacity: 0;
display: block;
-webkit-transition: opacity 2s ease;
-moz-transition: opacity 2s ease;
-ms-transition: opacity 2s ease;
-o-transition: opacity 2s ease;
transition: opacity 2s ease;
}
.slider img.active{
height: 360px;
opacity: 1;
-webkit-transition: opacity 2s ease;
-moz-transition: opacity 2s ease;
-ms-transition: opacity 2s ease;
-o-transition: opacity 2s ease;
transition: opacity 2s ease;
}
Thanks to the creator of this fiddle which gave me this idea.
.active {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
you cant really animate addClass or removeClass but you could add a transition
but you can use some css:
.item {
opacity: 0
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.item.active{
opacity: 1
}
Instead of animation, in your case you can use transitions
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This code is working:
https://jsfiddle.net/9du21gtn/
But if I had this:
.linguait:hover{
border: 3px solid #888888;;
-webkit-transition: border 500ms linear;
-moz-transition: border 500ms linear;
-o-transition: border 500ms linear;
-ms-transition: border 500ms linear;
transition: border 500ms linear;
}
.linguait:hover > .it{
color: #888888;
-webkit-transition: color 500ms linear;
-moz-transition: color 500ms linear;
-o-transition: color 500ms linear;
-ms-transition: color 500ms linear;
transition: color 500ms linear;
}
It isn't working anymore:
https://jsfiddle.net/9du21gtn/1/
How can I do?
Because you are overriding the transition attributes in the hover class. This is the working code:
.linguait{
position: absolute;
border-radius: 50%;
width: 40px;
height: 40px;
border: 3px solid #c8c8c8;
top:50%;
margin-top: -20px;
right: 5%;
margin-right: -2px;
-webkit-transition: border 500ms linear;
-moz-transition: border 500ms linear;
-o-transition: border 500ms linear;
-ms-transition: border 500ms linear;
transition: border 500ms linear;
-webkit-transition: border 500ms, right 2s, margin-right 2s, -webkit-transform 2s;
transition: border 500ms, right 2s, margin-right 2s, transform 2s;
}
.linguait.active{
right:25%;
margin-right: -10px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: right 2s, margin-right 2s, -webkit-transform 2s;
transition: right 2s, margin-right 2s, transform 2s;
}
.it{
position: relative;
font-family: 'Signika', sans-serif;
font-size: 20px;
color: #c8c8c8;
top: 7.5px;
-webkit-transition: color 500ms linear;
-moz-transition: color 500ms linear;
-o-transition: color 500ms linear;
-ms-transition: color 500ms linear;
transition: color 500ms linear;
}
.linguait:hover{
border: 3px solid #888888;;
}
.linguait:hover > .it{
color: #888888;
}
When you mouse over either image, each rotates 360 degrees and changes from 50% to 100% opacity revealing image text below. I am trying to rotate the opposite image from which I hover over to simulate turning gears.
See Fiddle here.
#navBlueGear {
float:left;
transition: opacity 1s;
opacity:0.5;}
#navBlueGear:hover {
opacity:1.0;}
#aboutMe {
position:relative;
float:left;
top:130px;
left:-80px;
opacity: 0;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-o-transition: 1.5s;
transition: 1.5s;}
#navBlueGear:hover ~ #aboutMe {
opacity: 1;}
.aboutLink {
-webkit-transition:all 1.5s ease-out;
-moz-transition:all 1.5s ease-out;
-ms-transition:all 1.5s ease-out;
-o-transition:all 1.5s ease-out;
transition:all 1.5s ease-out;}
.aboutLink:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
#navOrangeGear {
position:relative;
float:left;
top:85px;
left:-75px;
transition: opacity 1s;
opacity:0.5;}
#navOrangeGear:hover {
opacity:1.0;}
#work {
position:relative;
float:left;
top:176px;
left:-143px;
opacity: 0;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;}
#navOrangeGear:hover ~ #work {
opacity: 1;}
.workLink {
-webkit-transition:all 1.5s ease-out;
-moz-transition:all 1.5s ease-out;
-ms-transition:all 1.5s ease-out;
-o-transition:all 1.5s ease-out;
transition:all 1.5s ease-out;}
.workLink:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
Is it possible to turn the opposite gear counter to the image you initially hover over as well as control the speed as the teeth of each need to look realistic?
Is it possible in CSS3 and if not how would I accomplish this in JavaScript? Any other suggestions or advice is appreciated, I am just beginning to work with writing code, thank you in advance.
Try this solution
http://jsfiddle.net/BRGG2/30/
I put all elements in a containing div and set the rotation to work when that div is hovered.
Each gear keeps its own opacity and hover link.
I set the second gear to turn the opposite way using this
#container:hover .workLink {
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
transform:rotate(-360deg);
}
As to calibrate both gears speed, this will take some fine tuning, using -webkit-transition-duration.
I have coded a compass and a compass needle for a header, when you hover over the compass the needle spins at a 720 degree angle, however, i want a way so that when i move my mouse off the compass it doesn't reverse. SOrry if i'm overlooking an easy solution but here's my current code to explain what im doing better.
.arrow{
width:100px;
height:100px;
background-image:url(https://dl.dropbox.com/u/81513943/Monolith/images/compass.png);
background-size:100px;
}
.arrowhover{
position:absolute;
margin-top:-100px;
background-size:100px;
width:100px;
-webkit-transition: all 1.7s ease-in-out;
-moz-transition: all 1.7s ease-in-out;
-ms-transition: all 1.7s ease-in-out;
-o-transition: all 1.7s ease-in-out;
transition: all 1.7s ease-in-out;
height:100px;
}
.arrowhover:hover{
-webkit-transform: rotate(1440deg);
-moz-transform: rotate(1440deg);
-webkit-transition: all 1.7s ease-out;
-moz-transition: all 1.7s ease-in-out;
-ms-transition: all 1.7s ease-in-out;
-o-transition: all 1.7s ease-in-out;
transition: all 1.7s ease-in-out;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
so yeh, compass is normal, hover it spins 720 degrees and on mouse out i want no animation, is there a way to do this?
p.s im useless at jquery and javascript
check my updated fiddle: http://jsfiddle.net/rHpDn/3/
I added transition: all 0s ease-in-out; to .arrow, so it does't have a transition back anymore.