I am wondering why my bounce animation no working in JSFiddle but working on my development site. Please check what's wrong with this one. In my development site the arrow bounces but not rotated like what told inside my css class.
.active.ongoing::before {
content: "\f175";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #56a4da;
font-size: 28px;
padding-right: 0.5em;
position: absolute;
top: 31px;
transform: rotate(41deg);
animation: bounce 2s infinite;
-moz-animation:bounce 2s infinite;
-ms-animation:bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/>
<div class="active ongoing">
</div>
this animation is probably based on animate.css which probably included in your development site , which you didn't include or specify keyframes in jsfiddle
so you can add this to your css and it will work
#keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0);
}
}
Related
I am implementing a marquee style banner using css keyframes. It's working great in desktop (see here in action), but when I use the same implementation and view the site in mobile browsers the animation delay does not work as expected.
The following occurs on mobile browsers (chrome and safari):
I am using a negative animation delay so as to already be halfway through the marquee scroll but instead the text appears halfway up the screen.
Blocks of empty space appear then the text fills in after a lag.
The animation runs through once then doesn't skips a cycle then continues.
The two divs containing text overlap
I have tried using translate3d vs translateX, different animation durations and animation-delays, adding in webkit, ms, moz prefixes, inspecting on the mobile browser.
Example codepen link
Would appreciate any guidance!
<div class="marquee">
<div class="marqueeScroll">
<span>Countdown to our first city guide</span>
<span>•</span>
<span>
NYC comes out in 10 days 4 hours 30 minutes 2 seconds
</span>
<span>•</span>
<span>Countdown to our first city guide</span>
<span>•</span>
<span>
NYC comes out in 10 days 4 hours 30 minutes 2 seconds
</span>
<span>•</span>
</div>
<div class="marqueeScroll2">
<span>Countdown to our first city guide</span>
<span>•</span>
<span>
NYC comes out in 10 days 4 hours 30 minutes 2 seconds
</span>
<span>•</span>
<span>Countdown to our first city guide</span>
<span>•</span>
<span>
NYC comes out in 10 days 4 hours 30 minutes 2 seconds
</span>
<span>•</span>
</div>
</div>
.marquee {
background-color: black;
color: #fff;
height: 39px;
width: 100vh;
right: 100vh;
overflow: hidden;
-webkit-transform: rotate(270deg) translateY(-100vh);
transform: rotate(270deg) translateY(-100vh);
transform-origin: top right;
display: flex;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.marquee:hover {
cursor: pointer;
}
.marquee span {
padding-right: 18px;
}
.marqueeScroll, .marqueeScroll2 {
height: 20px;
white-space: nowrap;
font-size: 10px;
display: block;
-webkit-animation-duration: 70s;
-moz-animation-duration: 70s;
-o-animation-duration: 70s;
animation-duration: 70s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.marqueeScroll {
-webkit-animation-name: marquee;
-moz-animation-name: marquee;
-o-animation-name: marquee;
animation-name: marquee;
-webkit-animation-delay: -35s;
-moz-animation-delay: -35s;
-o-animation-delay: -35s;
animation-delay: -35s;
}
.marqueeScroll2 {
-webkit-animation-name: marquee2;
-moz-animation-name: marquee2;
-o-animation-name: marquee2;
animation-name: marquee2;
-webkit-animation-delay: -70s;
-moz-animation-delay: -70s;
-o-animation-delay: -70s;
animation-delay: -70s;
}
#-webkit-keyframes marquee {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: translate3d(100%, 0, 0);
}
}
#-moz-keyframes marquee {
0% {
-moz-transform: translate3d(-100%, 0, 0);
}
100% {
-moz-transform: translate3d(100%, 0, 0);
}
}
#-o-keyframes marquee {
0% {
-o-transform: translate3d(-100%, 0, 0);
}
100% {
-o-transform: translate3d(100%, 0, 0);
}
}
#keyframes marquee {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
#-webkit-keyframes marquee2 {
0% {
-webkit-transform: translate3d(-200%, 0, 0);
}
100% {
-webkit-transform: translate3d(0%, 0, 0);
}
}
#-moz-keyframes marquee2 {
0% {
-moz-transform: translate3d(-200%, 0, 0);
}
100% {
-moz-transform: translate3d(0%, 0, 0);
}
}
#-o-keyframes marquee2 {
0% {
-o-transform: translate3d(-200%, 0, 0);
}
100% {
-o-transform: translate3d(0%, 0, 0);
}
}
#keyframes marquee2 {
0% {
transform: translate3d(-200%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
I want to float the button from right bottom to right top. While floating, it comes to the middle left like shown in attached image. I have tried a few steps but it is not working properly. Any help is highly appreciated. Thank you!
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, -1000);
transform: translate3d(0, 10px, -1000);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
<div style="float:right;" class="animated infinite bounceInUp">Button</div>
Instead of float: right, I have used position: absolute and right: for the desired effect. Check below snippet.
I have minimized the frames, please modify as per your needs.
.animated {
background-color: coral;
padding: 4px 10px;
position: absolute;
right: 0px;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#keyframes bounceInUp {
from {
right: 0px;
opacity: 0;
-webkit-transform: translateY(100vh);
transform: translateY(100vh);
}
60% {
opacity: 1;
right: 40%;
}
to {
right: 0px;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
<div class="animated infinite bounceInUp">Button</div>
I want pendulum effect with pure CSS but it's not smooth.
Here is what I want, but with pure CSS. http://www.webdevdoor.com/demos/html5-pendulum-demo/
But I prefer more looked like natural speed variation according to it's position.
Fiddle
.bellImg {
height: 20px;
width: 20px;
position: absolute;
right: 10px;
top: 18px;
-webkit-animation-name: rotate;
animation-delay: 3s;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
-webkit-transform-origin: 50% 0%;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
10% {
-webkit-transform: rotate(10deg);
}
20% {
-webkit-transform: rotate(20deg);
}
30% {
-webkit-transform: rotate(10deg);
}
40% {
-webkit-transform: rotate(5deg);
}
50% {
-webkit-transform: rotate(0deg);
}
60% {
-webkit-transform: rotate(-5deg);
}
70% {
-webkit-transform: rotate(-10deg);
}
80% {
-webkit-transform: rotate(-20deg);
}
90% {
-webkit-transform: rotate(-10deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
<img class="bellImg" src="img/bell.png">
There are a few problems in your code:
The animation-timing-function is specified as ease-in-out. This indicates that the animation starts and end slowly but has more speed in between. For a graceful and equal move, this should be set to linear.
This is what MDN says about ease-in-out timing function:
This keyword represents the timing function cubic-bezier(0.42, 0.0, 0.58, 1.0). With this timing function, the animation starts slowly, accelerates then slows down when approaching its final state. At the beginning, it behaves similarly to the ease-in function; at the end, it is similar to the ease-out function.
There is no value called linear for animation-direction.
The splits are not equal. That is, for some 10% gap it is rotating by 10 degree whereas for others it is rotating only by 5 degree. Make the splits equal.
The below snippet with all corrections done produces a smooth animation.
.bellImg {
height: 20px;
width: 20px;
position: absolute;
right: 10px;
top: 18px;
-webkit-animation-name: rotate;
animation-delay: 3s;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-transform-origin: 50% 0%;
-webkit-animation-timing-function: linear; /* or make your custom easing */
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(20deg);
}
75% {
-webkit-transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
<img class="bellImg" src="https://cdn1.iconfinder.com/data/icons/freeline/32/bell_sound_notification_remind_reminder_ring_ringing_schedule-48.png">
Setting the animation's speed to depend on the position (that is, slow down as it reaches the extremes and quicken up in the middle) is impossible to achieve with pure CSS (even if we add extra elements).
For setting the animation's speed depending on its position, one option would be to do the following:
Add the image into a container element. Animate it such that it rotates from 20deg to -40deg.
Make the animation on the parent start earlier than the child by 1/3rd of the animation duration of both. That is, reduce the delay on parent by 0.66s. This is done to get the parent to offset initial rotation on the child. The difference is 1/3rd of animation duration because it is the time taken by parent to come to 0deg.
Change the keyframes for the image's animation such that the rotation is from -20deg to 40deg.
Set the animation-direction as alternate for both so that they go in forward direction for first iteration, in reverse for the next and so on.
Set the animation-timing-function as ease-in-out so that it slows down as it approaches the extremes. The effect is more apparent when the animation duration is increased.
.container {
position: absolute;
height: 20px;
width: 20px;
/* right: 10px; commented for demo */
top: 18px;
transform: rotate(20deg);
animation-name: rotate-container;
animation-delay: 2.33s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
transform-origin: 50% 0%;
animation-timing-function: ease-in-out;
}
.bellImg {
height: 100%;
width: 100%;
transform: rotate(-20deg);
animation-name: rotate;
animation-delay: 3s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
transform-origin: 50% 0%;
animation-timing-function: ease-in-out;
}
#keyframes rotate {
0% {
transform: rotate(-20deg);
}
100% {
transform: rotate(40deg);
}
}
#keyframes rotate-container {
0% {
transform: rotate(20deg);
}
100% {
transform: rotate(-40deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
<img class="bellImg" src="https://cdn1.iconfinder.com/data/icons/freeline/32/bell_sound_notification_remind_reminder_ring_ringing_schedule-48.png">
</div>
Prefix-free library is used in the snippet only to avoid browser prefixes.
The equation involved in the movement of a pendulum is a sinusoidal movement.
You can get this movement with the following animation
.base {
height: 600px;
width: 10px;
position: absolute;
animation: base 10s infinite linear;
background-color: lightgray;
transform: translateX(588px);
}
#keyframes base {
from {transform: translateX(77px);}
to {transform: translateX(760px);}
}
.element {
height: 10px;
width: 10px;
background-color: green;
border-radius: 100%;
animation: element 10s infinite;
transform: translateY(553px);
}
#keyframes element {
from {transform: translateY(294px); animation-timing-function: ease-out;}
25% {transform: translateY(36px); animation-timing-function: ease-in;}
50% {transform: translateY(294px); animation-timing-function: ease-out;}
75% {transform: translateY(553px); animation-timing-function: ease-in;}
to {transform: translateY(294px);}
}
.ref {
width: 800px;
height: 600px;
background-image: url(http://i.stack.imgur.com/Fx4bR.png);
background-size: cover;
}
<div class="base">
<div class="element">
</div>
</div>
<div class="ref"></div>
I had to use some hand-worked values to adjust for the background-image, but the key idea is in the timing functions.
If the preset function is not what you want, you can set a cubic bezier and adjust it as you want.
.base {
height: 600px;
width: 10px;
position: absolute;
animation: base 10s infinite linear;
background-color: lightgray;
transform: translateX(588px);
}
#keyframes base {
from {transform: translateX(77px);}
to {transform: translateX(760px);}
}
.element {
height: 10px;
width: 10px;
background-color: green;
border-radius: 100%;
animation: element 10s infinite;
transform: translateY(553px);
}
#keyframes element {
from {transform: translateY(294px);
animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);}
25% {transform: translateY(36px);
animation-timing-function: cubic-bezier(0.7, 0.0, 0.9, 0.7);}
50% {transform: translateY(294px);
animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);}
75% {transform: translateY(553px);
animation-timing-function: cubic-bezier(0.7, 0.0, 0.9, 0.7);}
to {transform: translateY(294px);}
}
.ref {
width: 800px;
height: 600px;
background-image: url(http://i.stack.imgur.com/Fx4bR.png);
background-size: cover;
}
<div class="base">
<div class="element">
</div>
</div>
<div class="ref"></div>
This is the image used for reference
And this would be the 2 timing functions applied to a pendulum
.test {
height: 400px;
width: 10px;
background-color: lightgreen;
display: inline-block;
margin: 10px 100px;
transform-origin: center top;
}
.anim1 {
animation: oscil1 6s infinite;
}
.anim2 {
animation: oscil2 6s infinite;
}
#keyframes oscil1 {
from {transform: rotate(0deg); animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);}
25% {transform: rotate(20deg); animation-timing-function: cubic-bezier(0.7, 0.0, 0.9, 0.7);}
50% {transform: rotate(0deg); animation-timing-function: cubic-bezier(0.1, 0.3, 0.3, 1);}
75% {transform: rotate(-20deg); animation-timing-function: cubic-bezier(0.7, 0.0, 0.9, 0.7);}
to {transform: rotate(0deg);}
}
#keyframes oscil2 {
from {transform: rotate(0deg); animation-timing-function: ease-out;}
25% {transform: rotate(20deg); animation-timing-function: ease-in;}
50% {transform: rotate(0deg); animation-timing-function: ease-out;}
75% {transform: rotate(-20deg); animation-timing-function: ease-in;}
to {transform: rotate(0deg);}
}
<div class="test anim1"></div>
<div class="test anim2"></div>
I haven't used CSS here, but since (it seems like) you just want to avoid libraries, I've implemented it in native JS. It uses the Math.sin() method to tween the values smoothly. As you can see, the effect is very smooth and requires very little code.
var img = document.querySelector( '.bellImg' ),
start = 0;
function sine(){
img.style.transform = "rotate(" + 20 * Math.sin( start ) + "deg)";
start += 0.05;
setTimeout(sine, 1000/30)
}
setTimeout( sine, 3000 );
.bellImg {
height: 20px;
width: 20px;
position: absolute;
left: 10px;
top: 18px;
}
<img class="bellImg" src="https://cdn1.iconfinder.com/data/icons/freeline/32/bell_sound_notification_remind_reminder_ring_ringing_schedule-48.png">
Hope this helps!
I have applied CSS3 transform animation to a dynamically created element and it works in Safari,firefox and chrome but not in IE.I have checked the code and css. there is nothing wrong with them.
In IE inspector(Developer tools) animation properties are underlined in red.Don't know what is wrong with this. can someone please help?.
MY CSS
.loadNew {
-webkit-animation-name: rotate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-o-animation-name: rotate;
-o-animation-duration: 1s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
/* below animation properties are underlined in red in IE inspector */
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
If you’re using keyframes, be sure to place them directly at the top of your external CSS stylesheet.
Example:-
#font-face {
font-family:'mycoolfont';
src:url('../fonts/mycoolfont.eot');
src:url('../fonts/mycoolfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/mycoolfont.woff') format('woff'),
url('../fonts/mycoolfont.ttf') format('truetype'),
url('../fonts/mycoolfont.svg#mycoolfont') format('svg');
font-weight:normal;
font-style:normal;
}
/** Keyframes **/
#-webkit-keyframes pulsate {
0% { box-shadow: 0 0 1px #fff ; }
100% { box-shadow: 0 0 20px #fff; }
}
#keyframes pulsate {
0% { box-shadow: 0 0 1px #fff ; }
100% { box-shadow: 0 0 20px #fff; }
}
a {
-webkit-animation: pulsate 1.25s infinite alternate;
animation: pulsate 1.25s infinite alternate;
}
Reference
Well, finally I found the reason why it didn't work in IE. I have placed a meta tag and I changed it as
belows.
Before
<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1"/>
After
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1"/>
Thanks wiz kid for your quick responce
cheers (Y)
I looking for changing my background-color after a css rotateY when my div is hover
#-webkit-keyframes spin {
0%{
-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;
}
100%{
-webkit-transform: rotateY(180deg); -webkit-transform-origin: 0% 0% 5;
}
}
.hex:hover{
background:red;
-webkit-animation-name: spin;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
}
You should define that in you keyframe as your element is animating on hover so you can change the background color in the animation keyframe itself.
Try this:
#-webkit-keyframes spin {
0%{
-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;
}
100%{
-webkit-transform: rotateY(180deg); -webkit-transform-origin: 0% 0% 5;
background:red;
}
}
.hex:hover{
-webkit-animation-name: spin;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
}
.hexHovered {
background:red;
}
To retain the backgroud color at hover you can use this javascript code.
$(".hex").hover(
function () { $(this).addClass(".hexHovered")
});
You can make the animation "persist" in time using animation-fill-mode.
Asuming that you want the color to persist, but not the rotation, it is alittle bit more complicated; you need two animations so that you can make only one persistent.
#-webkit-keyframes spin {
0% { -webkit-transform: rotateY(0deg); }
100%{ -webkit-transform: rotateY(180deg); }
}
#-webkit-keyframes red {
0% { background: white; }
100% { background: red; }
}
.hex {
-webkit-animation-fill-mode: none, forwards;
-webkit-animation-name: spin, red;
-webkit-animation-iteration-count: 0;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s, 0.1s;
-webkit-animation-delay: 0s 1s;
-webkit-transform-origin: 0% 0% 5;
}
.hex:hover{
-webkit-animation-iteration-count: 1;
}
fiddle