Is there a way to slow down the hover effect? - html

Is there a way to slow down a hover effect? I have a hover effect on my site (removed) that displays text on hover of the images. I want to slow down the effect by a little. It's a tad jarring how quickly the picture switches over.
How would I do that?


You could add css3 transitions:
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;


It depends on how you're displaying the text. If you're changing a CSS property you can do this with CSS3 transitions. Below is an example.
HTML:
<div id="A"></div><div id="B"></div>
CSS:
div {
height: 100px;
width: 100px;
position: absolute;
top: 0;
left: 0;
-moz-transition: opacity 4s; /* Firefox */
-webkit-transition: opacity 4s; /* Safari and Chrome */
-o-transition: opacity 4s; /* Opera */
transition: opacity 4s;
}
#A {
background: red;
opacity: 1;
z-index: 1;
}
#B {
background: blue;
opacity: 0;
z-index: 2;
}
#B:hover {
opacity: 1;
}
Demo
Edit: David Thomas has told me that you cannot change the display with transitions. I have updated the above to use opacity.


I know this is quite a bit late but look into CSS3 animations. I use an animation on one of my Garry's Mod loading screens.
/* Styles go here */
button {
margin-left: 50%;
margin-right: 50%;
}
button:hover {
-webkit-animation: breathing 5s ease-out infinite normal;
animation: breathing 5s ease-out infinite normal;
}
#-webkit-keyframes breathing {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes breathing {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<p>Below I have a button that changes size on mouse hover useing CSS3</p>
<button>Hover over me!</button>
</body>
</html>
I know it's not quite the result your looking for but I'm sure you and others can find this useful.


If you'd like, you could use jQuery .fadeIn() http://api.jquery.com/fadeIn/
.fadeIn( [duration] [, callback] )
duration string or number determining how long the animation will run.
callback function to call once the animation is complete.

Related

Customizing Storyline preloader animation

Most e-learning developers are familiar with the Storyline loader.
Here is the loader:
There's nothing wrong with the loader but I want to replace it with my own CSS loader animation!
Now I want to know how to add My Loader Animation CSS Code to Storyline's CSS Code.
In other words, I want to add My Loader Animation CSS to Storyline's CSS Code.
Here is My Loader Animation CSS Code:
<div class="lds-css ng-scope"><div style="width:100%;height:100%" class="lds-ellipsis"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div><style type="text/css">#keyframes lds-ellipsis3 {
0%, 25% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
left: 100px;
}
100% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes lds-ellipsis3 {
0%, 25% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
left: 100px;
}
100% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes lds-ellipsis2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
#-webkit-keyframes lds-ellipsis2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
#keyframes lds-ellipsis {
0% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
left: 100px;
}
75% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
left: 168px;
-webkit-transform: scale(0);
transform: scale(0);
}
}
#-webkit-keyframes lds-ellipsis {
0% {
left: 32px;
-webkit-transform: scale(0);
transform: scale(0);
}
25% {
left: 32px;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
left: 100px;
}
75% {
left: 168px;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
left: 168px;
-webkit-transform: scale(0);
transform: scale(0);
}
}
.lds-ellipsis {
position: relative;
}
.lds-ellipsis > div {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
}
.lds-ellipsis div > div {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f00;
position: absolute;
top: 100px;
left: 32px;
-webkit-animation: lds-ellipsis 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
animation: lds-ellipsis 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
}
.lds-ellipsis div:nth-child(1) div {
-webkit-animation: lds-ellipsis2 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
animation: lds-ellipsis2 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
background: #1875e5;
}
.lds-ellipsis div:nth-child(2) div {
-webkit-animation-delay: -5s;
animation-delay: -5s;
background: #499255;
}
.lds-ellipsis div:nth-child(3) div {
-webkit-animation-delay: -2.5s;
animation-delay: -2.5s;
background: #f2b736;
}
.lds-ellipsis div:nth-child(4) div {
-webkit-animation-delay: 0s;
animation-delay: 0s;
background: #c5523f;
}
.lds-ellipsis div:nth-child(5) div {
-webkit-animation: lds-ellipsis3 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
animation: lds-ellipsis3 10s cubic-bezier(0, 0.5, 0.5, 1) infinite forwards;
background: #1875e5;
}
.lds-ellipsis {
width: 200px !important;
height: 200px !important;
-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}
</style></div>
And here is the Storyline's CSS Code:
<style rel="stylesheet" data-noprefix>.slide-loader{position:absolute;pointer-events:none;left:50%;top:50%;width:500px;height:500px;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);z-index:10000;background:transparent url("loader.gif") no-repeat center center}.mobile-chrome-warning{position:fixed;width:300px;height:75px;bottom:0px;background:rgba(0,0,0,0.0001);display:none;pointer-events:none;z-index:99}.mobile-chrome-warning-btn{position:absolute;left:-16px;top:-15px;width:107px;height:107px;background:rgba(0,0,0,0.6);border-radius:50%;border:1px solid rgba(255,255,255,0.2);pointer-events:all;-webkit-transform:scale(0.6)}.mobile-chrome-warning-btn svg{position:absolute;left:60%;top:58%;-webkit-transform:translate(-50%, -50%)}.mobile-chrome-warning-bubble{position:relative;color:white;padding:10px;background:rgba(0,0,0,0.8);border-radius:5px;float:left;margin-left:100px;margin-top:15px;pointer-events:none}.mobile-chrome-warning-bubble:before{position:absolute;top:8.5px;left:-20px;width:30px;height:30px;content:'';display:block;width:0;height:0;border-style:solid;border-width:12.5px 20px 12.5px 0;border-color:transparent rgba(0,0,0,0.8) transparent transparent;pointer-events:none}.is-mobile .swipe-resume-arrow{position:fixed;top:30%;left:50%;-webkit-transform:translate(-50%, 0);width:12%}.is-mobile .mobile-chrome-warning-text{position:fixed;top:56%;left:50%;-webkit-transform:translate(-50%, 0);height:30%;width:80%;line-height:43px;text-align:center;color:#aeb7bd;word-break:break-word;font-size:20px}.slide-loader .mobile-loader-dot{display:none}#-ms-keyframes spin{from{-ms-transform:translate(-50%, -50%) rotate(0deg)}to{-ms-transform:translate(-50%, -50%) rotate(360deg)}}#-moz-keyframes spin{from{-moz-transform:translate(-50%, -50%) rotate(0deg)}to{-moz-transform:translate(-50%, -50%) rotate(360deg)}}#-webkit-keyframes spin{from{-webkit-transform:translate(-50%, -50%) rotate(0deg)}to{-webkit-transform:translate(-50%, -50%) rotate(360deg)}}#keyframes spin{from{transform:translate(-50%, -50%) rotate(0deg)}to{transform:translate(-50%, -50%) rotate(360deg)}}body.is-mobile{background:black !important}body.is-theme-unified{background:#1b1a1a}.is-mobile .load-container,.is-theme-unified .load-container{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1;visibility:visible;-webkit-transition:visibility 250ms, opacity 250ms linear;-moz-transition:visibility 250ms, opacity 250ms linear;-mz-transition:visibility 250ms, opacity 250ms linear;transition:visibility 250ms, opacity 250ms linear;pointer-events:none}.is-mobile .hide-slide-loader .load-container,.is-theme-unified .hide-slide-loader .load-container{opacity:0;visibility:hidden}.is-mobile .slide-loader,.is-theme-unified .slide-loader{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none;background:none;text-align:center;width:120px;height:80px;top:60%}.is-theme-unified .slide-loader{top:50%}.is-mobile .slide-loader .mobile-loader-dot,.is-theme-unified .slide-loader .mobile-loader-dot{width:30px;height:30px;background-color:white;border-radius:100%;display:inline-block;-webkit-animation:slide-loader 1s ease-in-out 0s infinite both;-moz-animation:slide-loader 1s ease-in-out 0s infinite both;-ms-animation:slide-loader 1s ease-in-out 0s infinite both;animation:slide-loader 1s ease-in-out 0s infinite both}.is-mobile .slide-loader .dot1,.is-theme-unified .slide-loader .dot1{-webkit-animation-delay:-0.2s;-moz-animation-delay:-0.2s;-ms-animation-delay:-0.2s;animation-delay:-0.2s}.is-mobile .slide-loader .dot2,.is-theme-unified .slide-loader .dot2{-webkit-animation-delay:-0.1s;-moz-animation-delay:-0.1s;-ms-animation-delay:-0.1s;animation-delay:-0.1s}#-ms-keyframes slide-loader{0%,80%,100%{-ms-transform:scale(0.6)}40%{-ms-transform:scale(0)}}#-moz-keyframes slide-loader{0%,80%,100%{-moz-transform:scale(0.6)}40%{-moz-transform:scale(0)}}#-webkit-keyframes slide-loader{0%,80%,100%{-webkit-transform:scale(0.6)}40%{-webkit-transform:scale(0)}}#keyframes slide-loader{0%,80%,100%{transform:scale(0.6)}40%{transform:scale(0)}}.mobile-load-title-overlay{display:none}.is-mobile .mobile-load-title-overlay,.is-touchable .mobile-load-title-overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;pointer-events:none}.is-mobile .mobile-load-title-overlay .mobile-load-title,.is-touchable .mobile-load-title-overlay .mobile-load-title{position:relative;height:30%;width:80%;margin:0 auto;line-height:43px;text-align:center;color:#aeb7bd;word-break:break-word}#media only screen and (min-width: 320px) and (orientation: landscape){.is-mobile .mobile-load-title,.is-touchable .mobile-load-title{font-size:28.8px;-moz-transform:translateY(33%);-ms-transform:translateY(33%);-webkit-transform:translateY(33%);transform:translateY(33%)}}#media only screen and (min-width: 320px) and (orientation: portrait){.is-mobile .slide-loader,.is-touchable .slide-loader{top:55%}.is-mobile .mobile-load-title,.is-touchable .mobile-load-title{font-size:28.8px;-moz-transform:translateY(35%);-ms-transform:translateY(35%);-webkit-transform:translateY(35%);transform:translateY(35%)}}
</style>
Every and any attempts to make it work was a complete failure for me.
Any advice is extremely appreciated.

It's great being able to change the animation. Here’s how for the HTML5 version.
I've done it with Storyline 360, and this method is reported to work in Storyline 3 too.
Publish your course and navigate to the folder that you published to.
Copy your chosen animation into this folder, making note of the filename. Optionally, place the animation within a subfolder.
Open the story_html5.html file in a text editor.
Relatively close to the top you will find:
url("data:image/svg+xml;base64
Delete data:image and the many lines following. You'll stop right before this part:
")
Now type the relative path and filename between the quotes you have left. So, now it looks like
url("folder/image.gif")
If your loader image is not exactly 100x100, then you will edit the width and height of your new animated image. If you look at the lines above where you just edited, you'll find the spot. The code looks like
width:100px;height:100px;
If your loader image is a spinning type, then you’re done. If it’s not a spinning type, you need to remove the sections of code that have “spin” in them, or your animation will also spin. Make sure you remove a whole section in between the semicolons, plus one semicolon. Don’t leave extra semicolons and don’t remove too many.
Source: Melissa Milloway’s tutorial

Blinking zoom-in zoom-out image by CSS

I use this code to create a blinking zoom-in and zoom-out image, but it only zoom-in and after that, it reset image and again zoom-in.
#keyframes blink {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
img {
transition: .3s ease-in;
animation: blink 1s;
animation-iteration-count: infinite;
}
JSFiddle

Easy solution would be:
#keyframes blink {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
img {
transition: .3s ease-in;
animation: blink 1s;
animation-iteration-count: infinite;
}
So you just need in the end of animation make image same position as it is at start. : )

You have to animate it to the start point again. Like this:
#keyframes blink {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
img {
transition: .3s ease-in;
animation: blink 1s;
animation-iteration-count: infinite;
}

How to use CSS animations to create a cube's opening like in the picture?

In my project, when the homepage is opened, it should run a CSS animation so that the cube's faces open. After the animation is complete the faces should be like in the picture (I need to have a result like the first opening in the picture).
This is my code,
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
-webkit-animation: sk-foldCubeAngle 2.4s 0.5 linear both;
animation: sk-foldCubeAngle 2.4s 0.5 linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.sk-folding-cube .sk-cube5:before {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.sk-folding-cube .sk-cube6:before {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
#keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
<html>
<head>
<link href="style.css" rel="stylesheet">
<title>Open Cube</title>
<h1>Apertura Cubo</h1>
</head>
<body>
<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</body>
</html>
How can I do this?

Judging by the description, snippet and the picture provided in question it seems like you are trying to create a flat cube opening animation where each face of the cube opens one by one and ends up with the appearance as shown in the first sample within the picture.
It might be possible to achieve that effect by enhancing your current code but I found it a bit confusing and so went with my own version of a flat-cube.
Explanation:
First create a cube with six faces (one div element for each face). I've made the front face as a child element of the left face element because the front face should eventually get opened on the left hand side of the left face.
Each face is a 50 x 50px square whose transform and transform-origin properties are set in such a way that it creates a cube.
Opening animation is then attached to each of the faces and a delay is added depending on when each face should get opened. In the demo, the right face gets opened first and so it has no delay, the bottom face is opened second and so it has a delay of 1s (equal to the animation time of right face), the top face is opened third and so has a delay of 2s (equal to combined animation time of the previous two faces) and so on.
The back face doesn't have any animation attached because it doesn't need to open at all ;)
.cube {
position: relative;
margin: 100px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
height: 50px;
width: 50px;
transform-style: preserve-3d;
}
.back {
background: rebeccapurple;
}
.right {
background: tomato;
transform: rotateY(90deg);
transform-origin: right;
animation: open-y 1s ease-in-out forwards;
}
.bottom {
background: crimson;
transform: rotateX(270deg);
transform-origin: bottom;
animation: open-x 1s 1s ease-in-out forwards;
}
.top {
background: indianred;
transform: rotateX(90deg);
transform-origin: top;
animation: open-x 1s 2s ease-in-out forwards;
}
.left {
background: yellowgreen;
transform: rotateY(270deg);
transform-origin: left;
animation: open-y 1s 3s ease-in-out forwards;
}
.front {
background: chocolate;
transform: rotateY(270deg);
transform-origin: right;
animation: open-y 1s 3s ease-in-out forwards;
}
#keyframes open-y {
to {
transform: rotateY(180deg);
}
}
#keyframes open-x {
to {
transform: rotateX(180deg);
}
}
<div class="cube">
<div class="back"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="top"></div>
<div class="left">
<div class="front"></div>
</div>
</div>
Note: It is very much possible to achieve a similar effect in other ways also and in addition make them look a lot more realistic but that would most likely involve a good amount of translate transforms, extra keyframe settings for the animations etc - in short, a lot more complex code.

CSS3 animation only works on the first hover

I am building a website and i am attempting to animate a :hover of a div so that when a mouse hovers over it another div that is currently at opacity:0 will increase its opacity to 0.8 over the span of 3.5 seconds while concurrently fading down into place.
This will work properly until the second time that i try it and then it will not fade back to 0 opacity when i leave the object with my mouse. The object will stay visible with opacity 0.8.
Hopefully i am making sense.
The fade animations are pulled from Animate.css and inserted directly into my css.
All of my code pertaining to this issue can be found here
.widget-Button4.widget-header.widget-html-widget.widget p
{
background:none;
height: 50px;
position: absolute;
top: 250px;
left: 1000px;
}
#Hosting
{
background-image: url("images/header_rollout_expandedbg.png");
background-size:100%;
background-repeat:no-repeat;
margin: 0 0 1em;
font-size: 11px;
line-height: 1.538em;
float: left;
padding: 20px 14px 14px 14px;
position: absolute;
top: 274px;
left: 909px;
z-index: 0;
-webkit-animation:fadeOutUp 3.5s; /* Chrome, Safari, Opera */
animation:fadeOutUp 3.5s;
-webkit-transition: opacity 3.5s ease-in-out;
-moz-transition: opactiy 3.5s ease-in-out;
-ms-transition: opacity 3.5s ease-in-out;
-o-transition: opacity 3.5s ease-in-out;
transition: opacity 3.5s ease-in-out;
filter: alpha(opacity=0);
opacity: 0;
}
#HostingButton
{
background-image: url("images/header_rolloutbg_static_complete.png");
background-size:100%;
background-repeat:no-repeat;
height: 20px;
width: 20px;
position: absolute;
top: 263px;
left: 1007px;
-webkit-transition: all 3.5s ease-in-out;
-moz-transition: all 3.5s ease-in-out;
-o-transition: all 3.5s ease-in-out;
-ms-transition: all 3.5s ease-in-out;
z-index: 50;
}
#HostingButton:hover
{
-webkit-transform: rotate(1080deg);
-moz-transform: rotate(1080deg);
-o-transform: rotate(1080deg);
-ms-transform: rotate(1080deg);
}
#HostingButton:hover + #Hosting
{
-webkit-animation:fadeInDown 3.5s; /* Chrome, Safari, Opera */
animation:fadeInDown 3.5s;
transition: none;
-o-transition: none;
-ms-transition: none;
-moz-transition: none;
-webkit-transition: none;
filter: alpha(opacity=80);
opacity: 0.8;
}
#-webkit-keyframes fadeInDown
{
0%
{
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100%
{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes fadeInDown
{
0%
{
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100%
{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
#-webkit-keyframes fadeOutUp
{
0%
{
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%
{
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
}
#keyframes fadeOutUp
{
0%
{
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100%
{
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
}
And the HTML to go along with it here
<p>
Hosting
</p>
<div id="HostingButton">
</div>
<div id="Hosting">
<div id="rollouttext">
Hello
</div>
</div>
I managed to get the opacity part of it that i am having trouble with working in JSFiddle.
http://jsfiddle.net/7uR8z/1499/
It is the same code that i am using however, i think i might have some conflict and i am having a hell of a time trying to figure it out.
Any help would be appreciated!

How you are describing it is where there are 2 divs. The first div is visible and the second div is 0 opacity. When you hover the first div is 0 opacity and the second div is 80% opacity. This happens over 3.5 seconds.
I made the 2 states in different divs .item and .description. Not too sure why you had zoom in there? Let me know if this is not what you're trying to do.
.container {
height:200px;
width:200px;
position:relative;
}
.item {
height:200px;
width:200px;
position:absolute;
background:red;
-webkit-transition: opacity 3.5s ease-in;
-moz-transition: opactiy 3.5s ease-in;
-ms-transition: opacity 3.5s ease-in;
-o-transition: opacity 3.5s ease-in;
transition: opacity 3.5s ease-in;
filter: alpha(opacity=100);
opacity: 1;
}
.item:hover {
filter: alpha(opacity=0);
opacity: 0;
}
.descriton {
position:absolute;
height:200px;
width:200px;
background:green;
display:visible;
-webkit-transition: opacity 3.5s ease-in;
-moz-transition: opactiy 3.5s ease-in;
-ms-transition: opacity 3.5s ease-in;
-o-transition: opacity 3.5s ease-in;
transition: opacity 3.5s ease-in;
filter: alpha(opacity=0);
opacity: 0;
}
.descriton:hover {
filter: alpha(opacity=80);
opacity: 0.8;
}
Check out the demo jsfiddle

Activating more the one transition on mouse hover

In my css I have 3 cogs, I want when I hover one of the cogs, that the other 2 cogs also get activated.
My codes:
CSS
#box_1{
border: 1px solid red;
display: block;
position: relative !important;
width: 200px;
height: 200px;
}
.object1 {
position: absolute !important;
}
.cog1 {
top: 18%;
left: 5%;
}
.object2 {
position: absolute !important;
}
.cog2 {
top: 8%;
left: 54%;
}
.object3 {
position: absolute !important;
}
.cog3 {
top: 60%;
left: 54%;
}
.object1 {
position: absolute;
transition: all 20s ease-in;
-webkit-transition: all 20s ease-in; /** Chrome & Safari **/
-moz-transition: all 20s ease-in; /** Firefox **/
-o-transition: all 20s ease-in; /** Opera **/
}
#axis1:hover .rotate360cw {
transform: rotate(3600deg);
-webkit-transform: rotate(3600deg);
-o-transform: rotate(3600deg);
-moz-transform: rotate(3600deg);
}
.object2 {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#axis2:hover .rotate360cw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}
.object3 {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#axis3:hover .rotate360cw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}
HTML
<div id="box_1">
<div id="axis1"><img class="object1 cog1 rotate360cw aligncenter" alt="" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/512px-Cog_font_awesome.svg.png" width="128" height="128" /></div>
<div id="axis2"><img class="object2 cog2 rotate360cw aligncenter" alt="" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/512px-Cog_font_awesome.svg1-e1390559689165.png" width="64" height="64" /></div>
<div id="axis3"><img class="object3 cog3 rotate360cw aligncenter" alt="" src="http://biready.visseninfinland.nl/wp-content/uploads/2014/01/512px-Cog_font_awesome.svg2-e1390559748608.png" width="64" height="64" /></div>
</div>
Check this at fiddle here.
How can I achieve this?

try adding this to your css
#box_1:hover .rotate360cw {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
}
Not 100% thats the result you want.
DEMO
Peace.

Add, for instance:
#axis1:hover ~ div > img {
-webkit-transform: rotate(-360deg) !important;
}
Same can be done also for #axis2:hover ~ div > img. Unfortunately CSS can't ascend so therefore you can't declare a rule which would apply from cog2 to cog1 or from cog3 to cog2/cog1. This could only be solved with JavaScript.

You cannot archive this with siblin selectors, since you cannot ascent in CSS (you cannot affect .cog1 when hovering .cog3).
An idea is to give the container the effect trigger:
#box1:hover img[class*="cog"] {
niceHoverEffect
}