I need to create a animation that will make the dots jump one by one with delay.
How can this thing work in IE? (chrome working)
working not correct, when i press [F5]key they are working.
i don't understand why it doesn't.
test page here!
https://codepen.io/cailan/pen/GBxzPP
.txt{margin-top:50px}
.txt em{font-style:normal;font-size:50px;letter-spacing:5px;}
.txt em span {
display:inline-block;background:url('bg_dot.png') no-repeat center 3px;
padding-top:10px;font-weight:800;
animation-fill-mode: backwards;-webkit-animation-fill-mode: backwards;
}
.txt em span:nth-child(1) {
animation: dot 1.2s ease-in-out infinite alternate;
-webkit-animation:dot 1.2s ease-in-out infinite alternate;
-ms-animation: dot 1.2s ease-in-out infinite alternate;
}
.txt em span:nth-child(2) {
animation: dot 1.2s ease-in-out 0.2s infinite alternate;
-webkit-animation:dot 1.2s ease-in-out 0.2s infinite alternate;
-ms-animation: dot 1.2s ease-in-out 0.2s infinite alternate;
}
.txt em span:nth-child(3) {
animation: dot 1.2s ease-in-out 0.4s infinite alternate;
-webkit-animation:dot 1.2s ease-in-out 0.4s infinite alternate;
-ms-animation: dot 1.2s ease-in-out 0.4s infinite alternate;
}
.txt em span:nth-child(4) {
animation: dot 1.2s ease-in-out 0.6s infinite alternate;
-webkit-animation:dot 1.2s ease-in-out 0.6s infinite alternate;
-ms-animation: dot 1.2s ease-in-out 0.6s infinite alternate;
}
.txt em span:nth-child(5) {
animation: dot 1.2s ease-in-out 0.8s infinite alternate;
-webkit-animation:dot 1.2s ease-in-out 0.8s infinite alternate;
-ms-animation: dot 1.2s ease-in-out 0.8s infinite alternate;
}
#-webkit-keyframes dot {
0% { background-position:center 6px;}
42% { background-position:center top;}
45% { background-position:center 3px;}
100% { background-position:center 3px;}
}
#-ms-keyframes dot {
0% { background-position:center 6px;}
42% { background-position:center top;}
45% { background-position:center 3px;}
100% { background-position:center 3px;}
}
#-o-keyframes dot {
0% { background-position:center 6px;}
42% { background-position:center top;}
45% { background-position:center 3px;}
100% { background-position:center 3px;}
}
#keyframes dot {
0% { background-position:center 6px;}
42% { background-position:center top;}
45% { background-position:center 3px;}
100% { background-position:center 3px;}
}
<div class="txt">
<em><span>H</span><span>E</span><span>L</span><span>L</span><span>O</span>!</em>
</div>
Is it possible to force an element with an animation property affecting opacity to transition from its current state to another predetermined state on hover?
The null state object is animating between differing opacities:
#thumb {
opacity: .33;
-webkit-animation: pulse 2.7s infinite ease-in-out;
-o-animation: pulse 2.7s infinite ease-in-out;
-ms-animation: pulse 2.7s infinite ease-in-out;
-moz-animation: pulse 2.7s infinite ease-in-out;
animation: pulse 2.7s infinite ease-in-out;
}
#-webkit-keyframes pulse {
0% { opacity: 0.23; }
50% { opacity: 0.42; }
100% { opacity: 0.23; }
}
#keyframes pulse {
0% { opacity: 0.23; }
50% { opacity: .42; }
100% { opacity: .23; }
}
And I would like it ease in to a different image and opacity on hover state:
#thumb:hover {
opacity: 1;
background-image: url(hover.png);
-webkit-animation: initial;
-o-animation: initial;
-ms-animation: initial;
-moz-animation: initial;
animation: initial;
-webkit-transition: .23s ease-in-out;
transition: .23s ease-in-out;
}
I've been able to achieve a direct jump to opacity:1;, but haven't been able to achieve the smooth transition.
A prototype can be found here, on Codepen:
https://codepen.io/anon/pen/oqmMEV
add transition to the #thumb style, you currently only apply it to it's hover style so you will not see a transition
#thumb{
transition: .23s ease-in-out;
}
In my example, I'm using "Bob" by Ian Lunn. I really like the Hover effect, but as soon as I stop hovering it jolts back to it's original position. How can I ease my div back to it's regular position?
Animation CSS:
animation-name: hvr-bob-float, hvr-bob;
animation-duration: .3s, 1.5s;
animation-delay: 0s, .3s;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards;
animation-direction: normal, alternate;
jsfiddle: http://jsfiddle.net/v3z9rLae/
You can use a pseudo-element to make the circle and animate it with hvr-bob. Then use a transition on its parent to simulate the hvr-bob-float animation. It's not great, but it reduces some of the abruptness.
Here's an update to your fiddle
/* Bob */
#-webkit-keyframes hvr-bob {
50% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
}
#keyframes hvr-bob {
50% {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
}
.hvr-bob {
display: inline-block;
height: 80px;
width: 80px;
margin: 2%;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
/* use transition on parent */
-webkit-transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
/* the circle using a pseudo-element */
.hvr-bob:before {
content: "";
display: block;
background-color: #DDDDDD;
border-radius: 100%;
width: 100%;
height: 100%;
}
/* use transform on parent */
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
.hvr-bob:hover:before, .hvr-bob:focus:before, .hvr-bob:active:before {
-webkit-animation-name: hvr-bob;
animation-name: hvr-bob;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: .3s;
animation-delay: .3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
<div class="hvr-bob"></div>
Hi what I am trying to do is have a with background color and on hover it will transition to a image. I found very good example but other way around here is a link.
http://jsfiddle.net/davidThomas/PbvFr/1/ so I need bg black and on :hover image will appear over time. I tried to do this but unfortunately the transition is not smooth. thank you for your time!!!!!!!!
.imageWrap {
background-color: #333;
border: 1px solid #000;
height: 300px;
moz-transition: all 1s linear;
ms-transition: all 1s linear;
o-transition: all 1s linear;
transition: all 1s linear;
webkit-transition: all 1s linear;
width: 300px;
}
.imageWrap .img {
moz-transition: all 1s linear;
ms-transition: all 1s linear;
opacity: 1;
o-transition: all 1s linear;
transition: all 1s linear;
webkit-transition: all 1s linear;
}
.imageWrap:hover {
background-image: url(5.jpg);
moz-transition: all 1s linear;
ms-transition: all 1s linear;
o-transition: all 1s linear;
transition: all 1s linear;
webkit-transition: all 1s linear;
}
.img:hover, .imageWrap:hover .img {
moz-transition: all 1s linear;
ms-transition: all 1s linear;
opacity: 0;
o-transition: all 1s linear;
transition: all 1s linear;
webkit-transition: all 1s linear;
}
Just reverse what he did: http://jsfiddle.net/PbvFr/102/
Change opacity from 0 to 1 rather than 1 to 0.
Look the CSS
Here you go: FIDDLE
CSS
.imgWrap {
display: inline-block;
position:relative;
border: 1px solid #000;
background-color: #000;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
height: 500px;
width:364px;
}
.imgWrap img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background: #fff;
color: #fff;
opacity:0;
transition:1s;
}
.imgWrap:hover img {
opacity: 1;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
I have a div. Lets say #logo and I want it on load delay 3 seconds and when display from left to right with slight animations like ease-in-out. I am adding animations:
#logo {
opacity: 0;
-webkit-animation-name: fromLeft, fadeIn;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate; /* normal, alternate */
-webkit-animation-timing-function: ease-out; /* ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) */
-webkit-animation-fill-mode: forwards; /* forwards, backwards, both, none */
-webkit-animation-delay: 3s;
-moz-animation-name: fromLeft, fadeIn;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate; /* normal, alternate */
-moz-animation-timing-function: ease-out; /* ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) */
-moz-animation-fill-mode: forwards; /* forwards, backwards, both, none */
-moz-animation-delay: 3s;
-o-animation-name: fromLeft, fadeIn;
-o-animation-duration: 3s;
-o-animation-iteration-count: 1;
-o-animation-direction: alternate; /* normal, alternate */
-o-animation-timing-function: ease-out; /* ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) */
-o-animation-fill-mode: forwards; /* forwards, backwards, both, none */
-o-animation-delay: 3s;
-ms-animation-name: fromLeft, fadeIn;
-ms-animation-duration: 3s;
-ms-animation-iteration-count: 1;
-ms-animation-direction: alternate; /* normal, alternate */
-ms-animation-timing-function: ease-out; /* ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) */
-ms-animation-fill-mode: forwards; /* forwards, backwards, both, none */
-ms-animation-delay: 3s;
animation-name: fromLeft, fadeIn;
animation-duration: 3s;
animation-iteration-count: 1;
animation-direction: alternate; /* normal, alternate */
animation-timing-function: ease-out; /* ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) */
animation-fill-mode: forwards; /* forwards, backwards, both, none */
animation-delay: 3s;
}
#-webkit-keyframes fromLeft {
0% { left: 0px; }
50% { left: 20px; }
100% { left: 50px; }
}
#-moz-keyframes fromLeft {
0% { left: 0px; }
50% { left: 20px; }
100% { left: 50px; }
}
#-ms-keyframes fromLeft {
0% { left: 0px; }
50% { left: 20px; }
100% { left: 50px; }
}
#-o-keyframes fromLeft {
0% { left: 0px; }
50% { left: 20px; }
100% { left: 50px; }
}
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
FadeIn works on mozilla, but FromLeft do not.
This works fine on jsfiddle
<div id="logo" style="position:absolute">LOGOTEXT</div>
http://jsfiddle.net/nG5zb/4/
This will only work in chrome and other webkit browsers though. If you use firefox the animation syntax must start with -moz- instead of -webkit-