I have a simple CSS animation to fade in text:
#title{
animation: text 2s;
-webkit-animation: text 2s;
-moz-animation: text 2s;
-o-animation: text 2s;
font-family: 'Lato300', sans-serif;
height: 115px;
position: absolute;
bottom: -10px;
left: 0;
right: 0;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#keyframes text{
0% {display: none;}
100% {display: inline;}
}
#-moz-keyframes text{
0% {display: none;}
100% {display: inline;}
}
#-webkit-keyframes text{
0% {display: none;}
100% {display: inline;}
}
#-o-keyframes text{
0% {display: none;}
100% {display: inline;}
}
The HTML:
<div id="title"><h1>Text goes here</h1></div>
For some reason, the animation doesn't play. Does anyone know why?
(I kept all the code incase something else is causing the problem)
You will not be able to animate display property. However you can transition an opacity
#-webkit-keyframes text {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
http://jsfiddle.net/5FCZA/
shake
#-webkit-keyframes text {
0%, 100% {-webkit-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
or rotate
#-webkit-keyframes text {
0% {-webkit-transform: scale(1);}
10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
100% {-webkit-transform: scale(1) rotate(0);}
}
For anyone in the future experiencing a similar issue I solved this by adding
display:block
to the span I was trying to animate
Related
I'm currently trying to create a blinking eye effect with HTML and CSS. My problem is that the under part (eyelid) is moving the wrong way. It should be animated counterwise in order to look like the desired effect.
I already tired a lot of things to make it work and don't have any idea what else to do.
Here's my CSS. Is this a problem where some JS is needed as well?
.upper-eye {
background: linear-gradient(to bottom,
rgb(0, 0, 0),
rgba(255,255,255, 0) 10%);
width: 100%;
height: 300%;
z-index: 0;
position: fixed;
top:0;
left:0;
animation: bounce 2s linear infinite;
}
.under-eye {
background: linear-gradient(to top,
rgb(0, 0, 0),
rgba(255,255,255, 0) 10%);
width: 100%;
height: 300%;
z-index: 100;
position: fixed;
bottom: -10px;
left: 0;
animation: bounce 2s linear infinite;
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
The problem is that you're using the same #keyframes and expecting a different action. You might need to make a second #keyframes setting to do what you want but the other way around, then you could set that #keyframes to the bottom eyelid.
So it could look something like this:
#-webkit-keyframes bounceReverse {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-15px);}
60% {-webkit-transform: translateY(-30px);}
}
keyframes bounceReverse {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-15px);}
60% {transform: translateY(-30px);}
}
bounceReverse {
webkit-animation-name: bounceReverse;
animation-name: bounceReverse;
}
You could also try using animation-direction: reverse; on the existing #keyframes animation to reverse the effect of the keyframe you're seeing correctly on the top eyelid.
I've just created a simple page with some text and a picture, but I can't figure it out how I can make the image flip.
body {
background-color: pink;
font-family: 'Courier New', Courier, monospace;
}
img {
display: block;
margin: 0 auto;
#keyframes flip {
0% {
transform: rotate3d(0, 0, 0);
}
100% {
transform: rotate3d(360deg, 360deg, 360deg);
}
}
}
As Deepak Kamat mentioned, you can find reference on how to use it searching on google, such as this example, which shows how animation and keyframs work together in css.
img {
animation: flip 3s infinite;
width: 100px;
height: 100px;
}
#keyframes flip{
0% {transform: rotate3d(0,0,0,0);}
20% {transform: rotate3d(0,1,0,360deg);}
40% {transform: rotate3d(0,0,0,360deg);}
60% {transform: rotate3d(1,0,0,180deg);}
80% {transform: rotate3d(0,0,1,360deg);}
100% {transform: rotate3d(1,0,0,360deg);}
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/800px-Google_%22G%22_Logo.svg.png" alt="Google Logo Image">
I'm trying to play with css3 and its animation and keyframe system but i'm running out of idea's to get this to work..
I rely on this animation that I found on codepen, and I would like to reverse the text revealing ('Escape' move to right and 'into amazing experiences' is revealing right to left)
Here is the CSS:
body {
text-align:center;
background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
color:#555;
font-family:'Roboto';
font-weight:300;
font-size:32px;
padding-top:40vh;
height:100vh;
overflow:hidden;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
}
div {
display:inline-block;
overflow:hidden;
white-space:nowrap;
}
div:first-of-type {
animation: showup 7s infinite;
}
div:last-of-type {
width:0px;
animation: reveal 7s infinite;
}
div:last-of-type span {
margin-left:-355px;
animation: slidein 7s infinite;
}
#keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}
#keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-800px; }
35% { margin-left:0px; }
100% { margin-left:0px; }
}
#keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width:355px;}
80% {opacity:1;}
100% {opacity:0;width:355px;}
}
I tried a lot of things such as adding float, margin, display or edit the keyframes but nothing did the job. The only remarkable change in this animation is the width div so I don't know how to make it work in a reverse situation.
Hoping someone could help me!
This could be help
body {
text-align: center;
background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
color:#555;
font-weight: 300;
font-size: 32px;
padding-top: 40vh;
height: 100vh;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
div {
display: inline-block;
overflow: hidden;
white-space: nowrap;
font-size: 30px;
line-height: 1.5;
}
div.lr {
width: 0px;
animation: reveal 7s infinite;
}
div.rl {
animation: showup 7s infinite;
}
div.rl span {
margin-left: -355px;
animation: slidein 7s infinite;
}
#keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}
#keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-800px; }
35% { margin-left:0px; }
100% { margin-left:0px; }
}
#keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width: 375px;}
80% {opacity:1;}
100% {opacity:0;width: 375px;}
}
<div class="lr">
<span>into amazing experiences</span>
</div>
<div class="rl">Escape</div>
You just need to specify animation-direction and set it to reverse. See more about animation-direction property. Here's codepen with reversed animation.
Is there a way to have two arrows "bouncing" in separate directions using CSS?
I have the following code on my site (domainmarket.io), which produces one bouncing arrow (which can be seen on the top left-hand corner), but I would like another arrow bouncing in another direction, but can't figure out how.
HTML
<div class="arrow bounce"></div>
<div class="topbarleft">
<a href="javascript:showhide('uniquename')">
<p><?php echo wp_kses_post( $ocin_topbar_text ); ?></p>
</a>
<div class="rightarrow bounceright"></div>
</div>
CSS
#-webkit-keyframes bounce{
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
60% {
-webkit-transform: translateX(-15px);
transform: translateX(-15px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(0);
}
40% {
transform: translateX(-30px);
}
60% {
transform: translateX(-15px);
}
}
#keyframes bounce{
0%, 20%, 50%, 80%, 100% {
-ms-transform: translateX(0);
transform: translateX(0);
}
40% {
-ms-transform: translateX(-30px);
transform: translateX(-30px);
}
60% {
-ms-transform: translateX(-15px);
transform: translateX(-15px);
}
}
#-webkit-keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-webkit-transform: translateX(30px)!important;
transform: translateX(30px)!important;
}
60% {
-webkit-transform: translateX(15px)!important;
transform: translateX(15px)!important;
}
}
#-moz-keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
transform: translateX(0);
}
40% {
transform: translateX(30px)!important;
}
60% {
transform: translateX(15px)!important;
}
}
#keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
-ms-transform: translateX(0);
transform: translateX(0);
}
40% {
-ms-transform: translateX(30px) !important;
transform: translateX(30px)!important;
}
60% {
-ms-transform: translateX(15px)!important;
transform: translateX(15px)!important;
}
}
.arrow {
margin-top:0px;
width: 24px;
height: 24px;
float: left;
margin-right: 10px;
background-image: url('http://domainmarket.io/wp-content/uploads/2016/04/arrow-1.png');
background-repeat: no-repeat;
}
.bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
.bounceright {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
.rightarrow.bounceright {
background-image: url('http://domainmarket.io/wp-content/uploads/2016/04/arrowright.png');
background-repeat: no-repeat;
float: left;
width: 24px;
height: 24px;
display: inline-block;
}
As you can see in my CSS code, I've tried to change the #keyframes to bounceright to see if that would work, but it hasn't.
Got it figured out!
In the CSS file
.bounceright {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
SHOULD BE
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}
Somehow, you adding !important to the bounceright keyframes disabled them. Remove it and it works.
Declarations in #keyframes that are marked with !important are ignored. See here: https://developer.mozilla.org/en/docs/Web/CSS/#keyframes#!important_in_a_keyframe
So here is the end result:
#keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
-ms-transform: translateX(0);
transform: translateX(0);
}
40% {
-ms-transform: translateX(30px);
transform: translateX(30px)
}
60% {
-ms-transform: translateX(15px);
transform: translateX(15px);
}
}
Edit: also, as the author of the question explained, change "bounce" with "bounceright" in the .bounceright CSS rule:
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}
However, I found a much simpler solution to all of this: instead of using another arrow and another class, just use the same. So instead of:
<div class="rightarrow bounceright"></div>
use
<div class="reverse"><div class="arrow bounce"></div></div>
with the CSS rule:
.reverse {
transform: rotate(180deg);
display:inline-block;
}
This way there is no duplication of the same code just to reverse the direction of the arrow.
I am creating scroll top icon just like demo: http://demo.themeum.com/html/eshopper/.
Here in demo scroll top icon is bouncing infinite. I want to create this one for my page also.
But i can't figure out why my effort not working? Fiddle
CSS:
a#scrollUp {
bottom: 0px;
right: 10px;
padding: 5px 10px;
background: #FE980F;
color: #FFF;
-webkit-animation: bounce 2s ease infinite;
animation: bounce 2s ease infinite;
}
you've missed out the declare keyframe animation in your css, update your css with the below
CSS
a#scrollUp {
animation: 2s ease 0s normal none infinite bounce;
background: none repeat scroll 0 0 #fe980f;
bottom: 0;
color: #fff;
padding: 5px 10px;
right: 10px;
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-30px);}
60% {-moz-transform: translateY(-15px);}
}
#-o-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
40% {-o-transform: translateY(-30px);}
60% {-o-transform: translateY(-15px);}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.animated.bounce {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
}
Fiddle Demo