We Keep Coding

How to animate a button on show?

I'm trying to animate a button to fadeInDown when it appears after scrolling 20 px down, but I can't figure out how to implement it.
I have fadeInDown in my .css file, but I can't find where to call it (either in javascript or in .html)
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("topBtn").style.display = "block";
$('#topBtn').fadeInDown('slow');
} else {
document.getElementById("topBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
#-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translatey(-10px);
-moz-transform: translatey(-10px);
-o-transform: translatey(-10px);
transform: translatey(-10px);
}
to {
opacity: 1;
-webkit-transform: translatey(0);
-moz-transform: translatey(0);
-o-transform: translatey(0);
transform: translatey(0);
}
}
#-moz-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translatey(-10px);
-moz-transform: translatey(-10px);
-o-transform: translatey(-10px);
transform: translatey(-10px);
}
to {
opacity: 1;
-webkit-transform: translatey(0);
-moz-transform: translatey(0);
-o-transform: translatey(0);
transform: translatey(0);
}
}
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translatey(-10px);
-moz-transform: translatey(-10px);
-o-transform: translatey(-10px);
transform: translatey(-10px);
}
to {
opacity: 1;
-webkit-transform: translatey(0);
-moz-transform: translatey(0);
-o-transform: translatey(0);
transform: translatey(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onShow="animation: fadeInDown" class="animated fadeInDown" onclick="topFunction()" id="topBtn" title="Go to top">Top</button>
Expected the button to be animated when it shows, but it just pops in to existence.

This can actually be done very easily with jQuery UI like so:
$(window).on('scroll', function(){
var scrollPosition = $(window).scrollTop();
if(scrollPosition > 20) {
$('#scroll-to-top').show("drop",{direction: "up"},300);
} else {
$('#scroll-to-top').hide("drop",{direction: "up"},300);
}
});
.scroll-to-top {
display:none;
position:fixed;
top:24px;
right:24px;
}
.content {
height:2000px;
}
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="scroll-to-top" class="scroll-to-top">
Scroll To Top
</button>
<div class="content"></div>
Let me know if this worked. See the code snippet for the example.

You do not need onshow to achieve this. Simply add the animation as a style property to your button and it will automatically trigger when display is set to block.
#topBtn {
position: fixed;
animation: fadeInDown 500ms;
}

.animated {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
Add this in your style, because you have not defined animated class in your style

Make a Webpage out of a 3D Cube ?

I´m trying to make a webpage out of a 3D cube with 6 surfaces/pages.
This is the Code of my 3D Cube:
$(document).ready(function(){
$('button').click(function(){
$('button').removeClass('active');
$(this).addClass('active');
});
$('.ft').click(function(){
$('#shape').removeClass().addClass('show-ft');
});
$('.rt').click(function(){
$('#shape').removeClass().addClass('show-rt');
});
$('.lt').click(function(){
$('#shape').removeClass().addClass('show-lt');
});
$('.bk').click(function(){
$('#shape').removeClass().addClass('show-bk');
});
$('.tp').click(function(){
$('#shape').removeClass().addClass('show-tp');
});
$('.bm').click(function(){
$('#shape').removeClass().addClass('show-bm');
});
$('.spinstart').click(function(){
$('#shape').addClass('spin');
});
$('.spinstop').click(function(){
$('#shape').removeClass('spin');
});
});
#main {
margin:0;
padding:0;
border:1px solid #ddd;
background-color:white;
width:800px;
height:500px;
margin:10px auto;
}
.btn-group-wraper {
position:absolute;
top:30px;
left:65px;
}
.shadow {
position:absolute;
width:100px;
height:100px;
box-shadow:0 0 15px white;
box-shadow:inset 0 0 155px white;
background-color:#000 !important;
opacity:.15 !important; -webkit-transform:
rotateX(90deg) translateZ(-100px);
-moz-transform: rotateX(90deg) translateZ(-100px);
}
#container {
width:100%; -webkit-perspective:800px; -moz-
perspective:800px;
perspective:800px; position:relative;
}
#shape {
position:relative; margin:0 auto; top:170px;
width:125px; height:125px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-5deg) rotateY(-30deg);
-moz-transform: rotateX(-5deg) rotateY(-30deg);
transform: rotateX(-5deg) rotateY(-30deg);
-webkit-transition: -webkit-transform 2s;
-moz-transition: -moz-transform 2s;
transition: transform 2s;
}
#-webkit-keyframes spin {
to { -webkit-transform: rotateX(360deg)
rotateY(360deg);
}
}
#-moz-keyframes spin {
to {
-moz-transform: rotateX(360deg) rotateY(360deg);
}
}
#keyframes spin {
to { transform: rotateX(360deg) rotateY(360deg); }
}
#shape > div {
position:absolute;
width:125px;
height:125px;
border:1px solid white;
background-color:#999;
}
#shape .ft {
-webkit-transform: translateZ(63px);
-moz-transform: translateZ(63px);
transform: translateZ(63px);
}
#shape .rt {
-webkit-transform: rotateY(90deg) translateZ(63px);
-moz-transform: rotateY(90deg) translateZ(63px);
transform: rotateY(90deg) translateZ(63px);
}
#shape .bk { -webkit-transform: rotateY(180deg)
translateZ(63px);
-moz-transform: rotateY(180deg) translateZ(63px);
transform: rotateY(180deg) translateZ(63px);
}
#shape .lt {
-webkit-transform: rotateY(270deg) translateZ(63px);
-moz-transform: rotateY(270deg) translateZ(63px);
transform: rotateY(270deg) translateZ(63px);
}
#shape .tp {
-webkit-transform: rotateX(90deg) translateZ(63px);
-moz-transform: rotateX(90deg) translateZ(63px);
transform: rotateX(90deg) translateZ(63px);
}
#shape .bm {
-webkit-transform: rotateX(270deg) rotateY(0deg)
translateZ(63px);
-moz-transform: rotateX(270deg) rotateY(0deg)
translateZ(63px);
transform: rotateX(270deg) rotateY(0deg)
translateZ(63px);
}
#shape.show-ft {
-webkit-transform: translateZ(63px);
-moz-transform: translateZ(63px);
transform: translateZ(63px);
}
#shape.show-rt {
-webkit-transform: rotateX(360deg) rotateY(-90deg);
-moz-transform: rotateX(360deg) rotateY(-90deg);
transform: rotateX(360deg) rotateY(-90deg);
}
#shape.show-bk {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#shape.show-lt {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
transform: rotateY(90deg);
}
#shape.show-tp {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: rotateX(-90deg) rotateY(-360deg);
-moz-transform: rotateX(-90deg) rotateY(-360deg);
transform: rotateX(-90deg) rotateY(-360deg);
}
#shape.show-bm {
-webkit-transform: rotateX(90deg) rotateY(360deg);
-moz-transform: rotateX(90deg) rotateY(360deg);
transform: rotateX(90deg) rotateY(360deg);
}
#shape.spin {
-webkit-animation: spin 5s infinite linear;
-moz-animation: spin 5s infinite linear;
animation: spin 5s infinite linear;
}
#shape {
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-transform: scale(1);
-webkit-transform: rotateX(-5deg) rotateY(-30deg);
-moz-transform: scale(1);
-moz-transform: rotateX(-5deg) rotateY(-30deg);
transform: scale(1);
transform: rotateX(-5deg) rotateY(-30deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="main">
<div id="container">
<div class="btn-group-wraper">
<div>
<button class="ft">1</button>
<button class="rt">2</button>
<button class="bk">3</button>
<button class="lt">4</button>
<button class="tp">5</button>
<button class="bm">6</button>
</div>
<div>
<button class="spinstart">spin start</button>
<button class="spinstop">spin stop</button>
</div>
</div>
<div id="shape">
<div class="ft" id="#ftid">1</div>
<div class="rt" id="#rtid">2</div>
<div class="bk" id="#bkid">3</div>
<div class="lt" id="#ltid">4</div>
<div class="tp" id="#tpid">5</div>
<div class="bm" id="#ftid">6</div>
</div>
</div>
</div>
To the Fiddle.js:
Fiddle.js
Please ignore the spinstart and spinstop.
To be honest this is not a selfmade code, I found it on a Website and downloaded it there.
As I had no idea about all that 3D stuff I started to learn it but
my knowledge about 3D cubes with css fails at the point optimizing the sizes of the cube.
I tried adding my sites into the:
<div id="shape">
<div class="ft" id="#ftid">1</div>
<div class="rt" id="#rtid">2</div>
<div class="bk" id="#bkid">3</div>
<div class="lt" id="#ltid">4</div>
<div class="tp" id="#tpid">5</div>
<div class="bm" id="#ftid">6</div>
</div>
The Problem about that was, when I do that the cube breaks, meaning it doesn´t rotate correctly anymore, I don´t know if it was because a webpage is bigger than just 1, 2, 3, 4, 5, 6 although I changed the size of the surfaces to auto so they adapt to the webpage´s css.
Maybe I could correct myself if you guys could give me a short explanation or
pointer on this topic.
Please don´t vote this Question down, I did not find anything similar to this topic on the web. I only found simplified examples and tutorials on 3D cubes.
Note:
I not asking for codes, I´m asking for help.

How to create sliders using materialize.css

I was trying to make a website for an upcoming event, using materialize css. Here's how I want the page to look (not exactly same. The images is for representation):
Here's my link to jsbin
body {
background: #0b1924;
}
/*Loading screen animation code begins*/
#load {
position: absolute;
width: 600px;
height: 36px;
left: 50%;
top: 40%;
margin-left: -300px;
overflow: visible;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
#load div {
position: absolute;
width: 20px;
height: 36px;
opacity: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
animation: move 2s linear infinite;
-o-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-animation: move 2s linear infinite;
transform: rotate(180deg);
-o-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
color: #35C4F0;
}
#load div:nth-child(2) {
animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
#load div:nth-child(3) {
animation-delay: 0.4s;
-o-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
#load div:nth-child(4) {
animation-delay: 0.6s;
-o-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
#load div:nth-child(5) {
animation-delay: 0.8s;
-o-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
#load div:nth-child(6) {
animation-delay: 1s;
-o-animation-delay: 1s;
-moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
#load div:nth-child(7) {
animation-delay: 1.2s;
-o-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
#keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
#-moz-keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-moz-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-moz-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
#-webkit-keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
#-o-keyframes move {
0% {
left: 0;
opacity: 0;
}
35% {
left: 41%;
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
65% {
left: 59%;
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
100% {
left: 100%;
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
}
/*
Loading screen animation ends here....
*/
/*FAB code begins*/
.fixed-action-btn,
.toolbar {
margin-top: 2%;
margin-left: 2%;
width: 100px;
height: 100px;
top: 23px;
left: 23px;
}
.btn-large i {
font-size: 2.5rem;
margin-top: 20%;
}
.slider {
position: relative;
display: block;
background-position: center;
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spark fest</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</head>
<body>
<div id="load">
<div>g</div>
<div>n</div>
<div>i</div>
<div>d</div>
<div>a</div>
<div>o</div>
<div>L</div>
</div>
<div class="row hideBeforeLoad ">
<div class="fixed-action-btn toolbar hideBeforeLoad col s12">
<a class="btn-floating btn-large hideBeforeLoad" style="width: 100px; height:100px;">
<i class="large material-icons hideBeforeLoad" title="Loading..">reorder</i>
</a>
<ul class="hideBeforeLoad">
<li class="waves-effect waves-light hideBeforeLoad"><i class="material-icons tooltipped" data-position="right" data-delay="50" data-tooltip="HOME">home</i>
</li>
<li class="waves-effect waves-light hideBeforeLoad"><i class="material-icons tooltipped"data-position="right" data-delay="50" data-tooltip="EVENTS">event</i>
</li>
<li class="waves-effect waves-light hideBeforeLoad"><i class="material-icons tooltipped"data-position="right" data-delay="50" data-tooltip="WHEN?/WHERE?">location_on</i>
</li>
<li class="waves-effect waves-light hideBeforeLoad"><i class="material-icons tooltipped"data-position="right" data-delay="50" data-tooltip="CONTACT US">contacts</i>
</li>
</ul>
</div>
</div>
<section>
<div class="row">
<div class="slider">
<ul class="slides">
<li>
<img src="https://tctechcrunch2011.files.wordpress.com/2015/04/codecode.jpg">
<!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2">
<!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3">
<!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4">
<!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
</section>
<script type="text/javascript">
$(window).on('load', function() {
$("#load").fadeOut("slow");;
});
$(window).on("pagebeforeload", function() {
$(".hideBeforeLoad").hide();
});
</script>
</body>
</html>
Here is how my output is when I run it on the browser:
Looks like the images are hidden. Is there any way I could tweak the code so that it looks as expected?

You have 0 opacity on all of the li elements.
.slider .slides li {
opacity: 0;
...
}
Change that and images will show up.

How can I trigger a CSS hover from another Div (with complicated attributes)

I'm new to this and hope I'm asking politely/correctly?!
(I have included the code I have so far below.)
I am trying to apply the hover of the '#blueBar' by hovering over the '#spiral' div.
I've tried using CSS, JQuery and Javascript for some time, but to no avail.
The end result is I'd like to have 2 'blueBars' crossing each other behind the Badge.png.
Upon hovering over the 'spiral' I'd like the badge to spin and the 2 'blueBars' increase in scale protruding from behind the badge.png.
Many thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#spiral{
border-radius: 50%;
background-image: url(badge.png);
position: absolute;
top: 50%;
left: 50%;
width: 350px;
height: 350px;
transition:all 1s ease-out;
transform:rotate(0deg) infinite;
-webkit-transform:rotate(0deg) infinite;
-moz-animation: rotate(0deg) infinite;
-ms-animation: rotate(0deg) infinite;
-o-animation: rotate(0deg) infinite;
animation: rotate(0deg) infinite;/* Safari and Chrome */
}
#spiral:hover, #blueBar.hovered {
display: block;
width:350px;
height:350px;
border-radius: 50%;
background-image: url(badge.png);
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
-ms-animation: spin 1s linear infinite;
-o-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-ms-keyframes spin {
0% {-ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); }
}
#blueBar {
width: 28px;
height: 28px;
background: #25cadb;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#blueBar:hover, .blueBar.hover{
width: 28px;
height: 28px;
background: #25cadb;
-moz-transform: rotate(45deg) scale(1, 10);
-webkit-transform: rotate(45deg) scale(1, 10);
-ms-transform: rotate(45deg) scale(1, 10);
-o-transform: rotate(45deg) scale(1, 10);
transform: rotate(45deg) scale(1, 10);
}
</style>
<meta HTTP-equiv="Content-Type" content="text/HTML; char-set=UTF-8">
<title>Animated Features</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="almost.ico" type="image/x-icon">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif">
<center>
<div style="height: 350px"> </div>
<script>
$('#spiral').on('mouseenter mouseleave', function(e) {
$('#blueBar:hover').trigger(e.type);
})
</script>
<div width="800px">
<div id="spiral">
<div id="spiral1">
</div>
</div>
<div id="blueBar" > </div>
</div>
</center>
</body>
</html>

You can use the sibling selector.
#spiral:hover ~ #blueBar {
background: red;
}
#blueBar will become red when #spiral is hovered over.
You can see an example on JSFiddle here. Hover over the "spiral" div and notice that the "blue bar" div becomes red.

If the elements won't always be siblings as in James Monger's answer, you could transfer the CSS in your #blueBar:hover to a class called .hover. Then, in your JQuery you'd write:
$('#spiral').on('mouseenter mouseout', function(){
$('#blueBar').toggleClass('hover');
});
Fiddle: https://jsfiddle.net/xk9ckcrk/2/
I modified the CSS a bit to show more easily what's going on. You should be able to add whatever animations and transformations you want to the .hover class and have it work.

How can one animate position using CSS -webkit-animation

I want to make an image go from poitn a to point b. I can animate the blur, and scale smoothly but the position is not working. It doesn't flow as it should. I have tried it with translatex and translate y and it doesn't seem to respond. Can someone please give me a hand. Here is my code.
body {overflow:hidden;
margin: 0;}
#bird {position: relative;
-webkit-animation: birdfly 5s linear infinite;
animation: birdfly 5s linear infinite;
}
#-webkit-keyframes birdfly {
0% {
-webkit-filter: blur(15px);
-webkit-transform: scale(0.7, 0.7);
left:110px; top:200px;
}
}
100% {
-webkit-filter: blur(0px);
-webkit-transform: scale(1.8, 1.8);
left:400px; top:600px;
}
}
#keyframes birdfly {
0% {
-webkit-filter: blur(15px);
-webkit-transform: scale(0.7, 0.7);
left:110px; top:200px;
}
}
100% {
-webkit-filter: blur(0px);
-webkit-transform: scale(1.8, 1.8);
left:400px; top:600px;
}
}
<html>
<head>
<title>Animated image</title>
<meta charset="utf-8">
</head>
<body>
<div id="bird">
<img src="http://i556.photobucket.com/albums/ss3/t_wangrung/Bird/ibon.gif">
</div>
</body>
</html>

I edited your source.
body {overflow:hidden;
margin: 0;}
#bird {position: relative;
-webkit-animation: birdfly 5s linear infinite;
animation: birdfly 5s linear infinite;
}
#-webkit-keyframes birdfly {
0% {
-webkit-filter: blur(15px);
-webkit-transform: scale(0.7, 0.7);
-webkit-transform: translate(110px, 200px);
transform: translate(110px, 200px);
}
}
100% {
-webkit-filter: blur(0px);
-webkit-transform: scale(1.8, 1.8);
-webkit-transform: translate(400px, 600px);
transform: translate(400px, 600px);
}
}
#keyframes birdfly {
0% {
-webkit-filter: blur(15px);
-webkit-transform: scale(0.7, 0.7);
-webkit-transform: translate(110px, 200px);
transform: translate(110px, 200px);
}
}
100% {
-webkit-filter: blur(0px);
-webkit-transform: scale(1.8, 1.8);
-webkit-transform: translate(400px, 600px);
transform: translate(400px, 600px);
}
}
<html>
<head>
<title>Animated image</title>
<meta charset="utf-8">
</head>
<body>
<div id="bird">
<img src="http://i556.photobucket.com/albums/ss3/t_wangrung/Bird/ibon.gif">
</div>
</body>
</html>
You need to use the -webkit-transform: translate(translateX, translateY) property.

If you're up for using jQuery, you can do it like this:
$("img").animate({
left: newXValue,
top: newYValue
});
For more details see: http://api.jquery.com/animate/