I'm expecting to see some animation on the circle. I doesn't! The circle remains stationary on page load. I've tried it in FF and Chrome. As far as I know the syntax is correct?
<!doctype html>
<html>
<head>
<title>CSS animations</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#balloon-one {
background:yellow;
border-radius:50px;
border:2px solid #FFCC00;
position:absolute;
height:100px;
width:100px;
top:200px;
left:300px;
-webkit-animation: floataround 5s infinite;
}
#-webkit-keyframes float {
0% { -webkit-transform: translateX(-20px) translateY(10px); }
30% { -webkit-transform: translateX(10px) translateY(-20px); }
70% { -webkit-transform: translateX(-10px) translateY(20px); }
100% { -webkit-transform: translateX(-20px) translateY(10px); }
0% { -moz-transform: translateX(-20px) translateY(10px); }
30% { -moz-transform: translateX(10px) translateY(-20px); }
70% { -moz-transform: translateX(-10px) translateY(20px); }
100% { -moz-transform: translateX(-20px) translateY(10px); }
}
</style>
</head>
<body>
<div id="balloon-one"></div>
</body>
</html>
help
I can see several errors in your code. First your animation is set to "floataround", but your animation name is juste "float". Then you mixed up -moz and -webkit prefixes. Here is a corrected version of your css:
#balloon-one {
background:yellow;
border-radius:50px;
border:2px solid #FFCC00;
position:absolute;
height:100px;
width:100px;
top:200px;
left:300px;
-webkit-animation: float 5s infinite;
-moz-animation: float 5s infinite;
animation: float 5s infinite;
}
#-webkit-keyframes float {
0% { -webkit-transform: translateX(-20px) translateY(10px); }
30% { -webkit-transform: translateX(10px) translateY(-20px); }
70% { -webkit-transform: translateX(-10px) translateY(20px); }
100% { -webkit-transform: translateX(-20px) translateY(10px); }
}
#-moz-keyframes float {
0% { -moz-transform: translateX(-20px) translateY(10px); }
30% { -moz-transform: translateX(10px) translateY(-20px); }
70% { -moz-transform: translateX(-10px) translateY(20px); }
100% { -moz-transform: translateX(-20px) translateY(10px); }
}
#keyframes float {
0% { transform: translateX(-20px) translateY(10px); }
30% { transform: translateX(10px) translateY(-20px); }
70% { transform: translateX(-10px) translateY(20px); }
100% { transform: translateX(-20px) translateY(10px); }
}
Tried on chrome, it works. Not tried with firefox.
Related
I currently have an image "floating". So it moves up and down over 10 seconds. But what I'd really like it to do is to do is slide in right from off canvas over 10 seconds and then float infinitely.
The code I have now just makes it float up and down and I'm struggling to add the slide in part. I'm new to CSS animation so I'd appreciate any help.
This is what I have so far.
.shake-vertical {
-webkit-animation: shake-vertical 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
animation: shake-vertical 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}
#-webkit-keyframes shake-vertical {
0%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10%,
30%,
50%,
70% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
20%,
40%,
60% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
80% {
-webkit-transform: translateY(6.4px);
transform: translateY(6.4px);
}
90% {
-webkit-transform: translateY(-6.4px);
transform: translateY(-6.4px);
}
}
#keyframes shake-vertical {
0%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10%,
30%,
50%,
70% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
20%,
40%,
60% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
80% {
-webkit-transform: translateY(6.4px);
transform: translateY(6.4px);
}
90% {
-webkit-transform: translateY(-6.4px);
transform: translateY(-6.4px);
}
}
Considering your image has a class of ball. You can add this CSS to your Existing CSS:
#keyframes slide-in {
from{
margin-right: -100px;
}
to{
margin-right: 0;
}
}
.ball{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
float: right;
animation: slide-in 10s forwards,/*forwards keeps the ball at final position*/
shake-vertical 15s infinite 10s both;
/*
* Two animations applied
* comma separated
* shake-vertical has a 10 second delay specified by '10s'
* the delay should be same as the duration of first animation
*/
}
I have added comments for explanation but if you need more, feel free to comment.
You can set the object with a slidein animation for 10 seconds and on the animationend event change its class to your shake animation.
Add CSS something like this:
#keyframes slidein {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(50vw);
}
}
.slidein {
animation-name:slidein;
animation-duration:10s;
animation-fill-mode: follow;
}
.shake {
animation-name: shake-vertical;
animation-duration: 10s;
animation-iteration-count: infinite;
}
}
and JavaScript something like this
obj.addEventListener("animationend", function () {
obj.classList.remove('slidein');
obj.classList.add('shake');
});
Example with a simple sliding square in the Snippet.
<!DOCTYPE html>
<html>
<head>
<style>
#keyframes slidein {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(50vw);
}
}
#keyframes shake-vertical {
0%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10%,
30%,
50%,
70% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
20%,
40%,
60% {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
80% {
-webkit-transform: translateY(6.4px);
transform: translateY(6.4px);
}
90% {
-webkit-transform: translateY(-6.4px);
transform: translateY(-6.4px);
}
}
#obj {
position: relative;
width: 50px;
height: 50px;
top: 50px;
background-color:magenta;
animation-delay:0s;
}
.slidein {
animation-name:slidein;
animation-duration:10s;
}
.shake {
left: 50vw;
animation-name:shake-vertical;
animation-duration: 10s;
animation-iteration-count: infinite;
}
</style>
</head>
<div id="obj" class="slidein"></div>
<script>
var obj = document.getElementById('obj');
obj.addEventListener("animationend", function () {
obj.classList.remove('slidein');
obj.classList.add('shake');
});
</script>
</html>
I have used css3 animate for small text to rotate but it wont rotate.
Jsfiddle
<h1 class="title">Coming Soon <small>btw learning</small></h1>
small {
animation:spin 4s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
use display:inline-block;
<h1 class="title">Coming Soon <span class="animation">btw learning</span></h1>
.title
{
font-family: 'Cinzel Decorative', cursive;
text-align: center;
font-size: 100px;
margin-top: 25%;
}
.animation {
animation:spin 4s linear infinite;
display:inline-block;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
I have tried to make an animated arrow like like the one in this site. A demo of my code attempt is available here. But the animation is not working in-line with the animation in the site.
My Code :
.animated-arrow-1 {
-webkit-animation: arrow1 3s infinite ease-out;
animation: arrow1 3s infinite ease-out;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0
}
.animated-arrow-2 {
-webkit-animation: arrow2 3s infinite ease-in;
animation: arrow2 3s infinite ease-in;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1
}
#-webkit-keyframes arrow1 {
0% {
opacity: 0;
-webkit-transform: translate(0,0);
transform: translate(0,0)
}
90% {
opacity: 0;
-webkit-transform: translate(0,0);
transform: translate(0,0)
}
100% {
opacity: 1;
-webkit-transform: translate(0,36px);
transform: translate(0,36px)
}
}
#keyframes arrow1 {
0% {
opacity: 0;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0)
}
90% {
opacity: 0;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0)
}
100% {
opacity: 1;
-webkit-transform: translate(0,36px);
-ms-transform: translate(0,36px);
transform: translate(0,36px)
}
}
#-webkit-keyframes arrow2 {
0% {
opacity: 1;
-webkit-transform: translate(0,0);
transform: translate(0,0)
}
90% {
opacity: 1;
-webkit-transform: translate(0,0);
transform: translate(0,0)
}
100% {
opacity: 0;
-webkit-transform: translate(0,36px);
transform: translate(0,36px)
}
}
#keyframes arrow2 {
0% {
opacity: 1;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0)
}
90% {
opacity: 1;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0)
}
100% {
opacity: 0;
-webkit-transform: translate(0,36px);
-ms-transform: translate(0,36px);
transform: translate(0,36px)
}
}
Could you please anybody tell me what I missed here?
You were reasonably close to achieving the required animation. In your code, there was only one movement from 0px to 36px for both the arrows but what was actually needed is a two stage animation with different keyframe settings for the two arrows. One arrow should start invisible at 0px, fade-in to 50px, stay there and then fade-out to 100px whereas the other arrow should start visible at 50px, fade-out to 100px, immediately go to 0px and then fade-in at 50px.
.icon {
position: relative;
}
.icon img {
position: absolute;
margin: auto;
display: block;
}
.animated-arrow-1 {
animation: arrow1 3s infinite linear;
opacity: 0
}
.animated-arrow-2 {
animation: arrow2 3s infinite linear;
opacity: 1;
}
#keyframes arrow1 {
0%, 10% {
opacity: 0;
transform: translate(0, 0px);
}
50%,
60% {
opacity: 1;
transform: translate(0, 50px)
}
100% {
opacity: 0;
transform: translate(0, 100px)
}
}
#keyframes arrow2 {
0%, 10% {
opacity: 1;
transform: translate(0, 50px);
}
50%,
60% {
opacity: 0;
transform: translate(0, 100px)
}
61% {
opacity: 0;
transform: translate(0, 0);
}
100% {
opacity: 1;
transform: translate(0, 50px)
}
}
body {
background: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="icon">
<img src="http://s12.postimg.org/ibsmfp6w9/Down_Arrow.png" class="animated-arrow-1" />
<img src="http://s12.postimg.org/ibsmfp6w9/Down_Arrow.png" class="animated-arrow-2" />
</div>
http://jsfiddle.net/xmesop57/
The bounce in effect is jerky in firefox. When I keep refreshing the page, sometimes the effect applies and sometimes it doesn't. But either ways, the bounce in jerky. All fine in chrome though.
There is a huge color difference between chrome and firefox. Why is it. Can this be fixed. My expected color is as seen in firefox.
HTML
<div class="container-fluid">
<div class="row-fluid radial-center">
<div class="centering text-center col-lg-3 clearfix">
<div class="animated bounceInLeft">
<input type="text" class="textbox" id="txtUsername" />
</div>
</div>
</div>
</div>
CSS
.radial-center {
/* fallback */
background-color: #413636;
background-position: center center;
background-repeat: no-repeat;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#370237), to(#413636));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #490338, #121211);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #D52B48, #413636);
/* IE 10 */
background: -ms-radial-gradient(circle, #D52B48, #413636);
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
#-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
#-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
-moz-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
-moz-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
-moz-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-moz-transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
-moz-animation-name:bounceInLeft;
}
You have two problems. (Those should have been two different questions, really.)
A problem in Firefox is that there's a horizontal scrollbar at one point, which causes the vertical size of the window to change briefly.Solution: give overflow-x:hidden to body.
You don't have the same colours in the -webkit- and -moz- prefixed gradients.Solution: make sure the colours are the same, and/or add an unprefixed radial-gradient after the prefixed ones.
html, body {
height:100%;
margin:0;
padding:0;
overflow-x:hidden; /* here */
}
.container-fluid {
height:100%;
display:table;
width: 100%;
padding:0;
}
.container-fluid:after {
content:none;
}
.container-fluid:before {
content:none;
}
.row-fluid {
height: 100%;
display:table-cell;
vertical-align: middle;
}
.centering {
float:none;
margin:0 auto;
padding:10px;
}
.col-lg-3 {
text-align:center;
}
.radial-center {
/* fallback */
background-color: #413636;
background-position: center center;
background-repeat: no-repeat;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#D52B48), to(#413636)); /* corrected colours */
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #D52B48, #413636); /* corrected colours */
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #D52B48, #413636);
/* modern browsers */
background: radial-gradient(circle, #D52B48, #413636); /* removed -ms- */
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-moz-animation-fill-mode: both;
}
#-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
#-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
-moz-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
-moz-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
-moz-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-moz-transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
-moz-animation-name:bounceInLeft;
}
<div class="container-fluid">
<div class="row-fluid radial-center">
<div class="centering text-center col-lg-3 clearfix">
<div class="animated bounceInLeft">
<input type="text" class="textbox" id="txtUsername" />
</div>
</div>
</div>
</div>
(Or, updated fiddle).
By the way, there is no -ms-radial-gradient.
I am trying to add a slide up from the bottom CSS3 Animation to the <main> element in this site, but the animation is not playing / taking place.
Any idea why?
Here is the link to the page where it is not happening: https://dl.dropboxusercontent.com/u/270523/help/animate/new.html
And here is the CSS for the animation:
.animated{
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
#-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-o-keyframes bounceInUp {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
60% {
opacity: 1;
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px);
}
100% {
-o-transform: translateY(0);
}
}
#keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
On your HTML code, you mistyped here:
<link rel="stylsheet" href="animate.css" type="text/css">
It's "stylesheet" !