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.
Related
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;
}
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
This menu should be positioned in the center of the website and cope with the resizing of the browser's window. Now it's in the center and the animation works. But whenever i try to make the menu responsive so it'll remain in the middle of the website when i resize, the animation stops. Any help please..
Scripting
$(".menu").on("click", function () {
$(".menu").addClass('permahover');
});
CSS
li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 180px;
text-align: right;
border-style: none;
}
.menu {
width: 150px;
height: 350px;
}
.menu li {
position: relative;
top: 150px;
bottom: 0;
left: 690px;
right: 0;
margin: auto;
border-style: none;
}
#item7 {
transition: opacity .8s, left .8s ease-out;
-moz-transition: opacity .8s, left .8s ease-out;
-webkit-transition: opacity .8s, left .8s ease-out;
-o-transition: opacity .8s, left .8s ease-out;
}
#item6 {
transition: opacity 1s, left 1s ease-out;
-moz-transition: opacity 1s, left 1s ease-out;
-webkit-transition: opacity 1s, left 1s ease-out;
-o-transition: opacity 1s, left 1s ease-out;
}
#item5 {
transition: opacity 1.2s, left 1.2s ease-out;
-moz-transition: opacity 1.2s, left 1.2s ease-out;
-webkit-transition: opacity 1.2s, left 1.2s ease-out;
-o-transition: opacity 1.2s, left 1.2s ease-out;
}
#item4 {
transition: opacity 1.4s, left 1.4s ease-out;
-moz-transition: opacity 1.4s, left 1.4s ease-out;
-webkit-transition: opacity 1.4s, left 1.4s ease-out;
-o-transition: opacity 1.4s, left 1.4s ease-out;
}
#item3 {
transition: opacity 1.6s, left 1.6s ease-out;
-moz-transition: opacity 1.6s, left 1.6s ease-out;
-webkit-transition: opacity 1.6s, left 1.6s ease-out;
-o-transition: opacity 1.6s, left 1.6s ease-out;
}
#item2 {
transition: opacity 1.8s, left 1.8s ease-out;
-moz-transition: opacity 1.8s, left 1.8s ease-out;
-webkit-transition: opacity 1.8s, left 1.8s ease-out;
-o-transition: opacity 1.8s, left 1.8s ease-out;
}
#item1 {
transition: opacity 2s, left 2s ease-out;
-moz-transition: opacity 2s, left 2s ease-out;
-webkit-transition: opacity 2s, left 2s ease-out;
-o-transition: opacity 2s, left 2s ease-out;
}
.permahover li {
opacity: 1;
left: 10%;
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">a</button></li>
<li id="item2">
<button onclick="myFunction2()">b</button></li>
<li id="item3">
<button>c</button>
</li>
<li id="item4">
<button>d</button>
</li>
<li id="item5">
<button>e</button>
</li>
<li id="item6">
<button>f</button>
</li>
<li id="item7">
<button>g</button>
</li>
</ul>
</div>
$(".menu").on("click", function () {
$(".menu").addClass('permahover');
});
li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 180px;
text-align: right;
border-style: none;
}
.menu {
width: 150px;
height: 350px;
}
.menu li {
position: relative;
top: 150px;
bottom: 0;
left: 690px;
right: 0;
margin: auto;
border-style: none;
}
#item7 {
transition: opacity .8s, left .8s ease-out;
-moz-transition: opacity .8s, left .8s ease-out;
-webkit-transition: opacity .8s, left .8s ease-out;
-o-transition: opacity .8s, left .8s ease-out;
}
#item6 {
transition: opacity 1s, left 1s ease-out;
-moz-transition: opacity 1s, left 1s ease-out;
-webkit-transition: opacity 1s, left 1s ease-out;
-o-transition: opacity 1s, left 1s ease-out;
}
#item5 {
transition: opacity 1.2s, left 1.2s ease-out;
-moz-transition: opacity 1.2s, left 1.2s ease-out;
-webkit-transition: opacity 1.2s, left 1.2s ease-out;
-o-transition: opacity 1.2s, left 1.2s ease-out;
}
#item4 {
transition: opacity 1.4s, left 1.4s ease-out;
-moz-transition: opacity 1.4s, left 1.4s ease-out;
-webkit-transition: opacity 1.4s, left 1.4s ease-out;
-o-transition: opacity 1.4s, left 1.4s ease-out;
}
#item3 {
transition: opacity 1.6s, left 1.6s ease-out;
-moz-transition: opacity 1.6s, left 1.6s ease-out;
-webkit-transition: opacity 1.6s, left 1.6s ease-out;
-o-transition: opacity 1.6s, left 1.6s ease-out;
}
#item2 {
transition: opacity 1.8s, left 1.8s ease-out;
-moz-transition: opacity 1.8s, left 1.8s ease-out;
-webkit-transition: opacity 1.8s, left 1.8s ease-out;
-o-transition: opacity 1.8s, left 1.8s ease-out;
}
#item1 {
transition: opacity 2s, left 2s ease-out;
-moz-transition: opacity 2s, left 2s ease-out;
-webkit-transition: opacity 2s, left 2s ease-out;
-o-transition: opacity 2s, left 2s ease-out;
}
.permahover li {
opacity: 1;
left: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">a</button></li>
<li id="item2">
<button onclick="myFunction2()">b</button></li>
<li id="item3">
<button>c</button>
</li>
<li id="item4">
<button>d</button>
</li>
<li id="item5">
<button>e</button>
</li>
<li id="item6">
<button>f</button>
</li>
<li id="item7">
<button>g</button>
</li>
</ul>
</div>
All you need is to remove your class on window resize. Try the following:
$(window).resize(function(){
$(".menu").removeClass("permahover")
});
I would also like to mention that your menu is actually off screen to the right, and the user can actually scroll to that position. Wrap this entire thing into a box and hide its overflow to make sure this isn not an issue.
I use transition effect for a div to make it change smoothly on scroll down, but I don't want this transition effect to be used when I mouse over or mouse out as the div is used as a button. I could omit this effect from mouse over, but I couldn't do anything for mouse out:
HTML Code:
<div class="navButton"></div>
CSS:
.navButton {
position: absolute;
top:10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.navButton.scroll {
top:100px;
}
.navButton:hover {
cursor: pointer;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
and jQuery code:
$(function() {
$(window).scroll(function(event){
if($(this).scrollTop() > 400){
$('.navButton').addClass('scroll');
};
});
});
One option would be to toggle a class on mouseover/mouseout:
Updated Example
$('.navButton').on('mouseover mouseout', function () {
$(this).toggleClass('no-transition');
});
.no-transition {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
You could alternatively, just transition the top property:
Updated Example
.navButton {
position: absolute;
top:10px;
-webkit-transition: top 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out;
-o-transition: top 0.5s ease-in-out;
-ms-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
}
If you are only trying to apply the transition to the top increase, you can target top intead of all:JS Fiddle
-webkit-transition: top 0.5s ease-in-out;
-moz-transition: top 0.5s ease-in-out;
-o-transition: top 0.5s ease-in-out;
-ms-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
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.