Skip to content

Instantly share code, notes, and snippets.

@fitosegrera

fitosegrera/index.html

Created July 30, 2014 23:09
Show Gist options
  • Save fitosegrera/f3de73abbf79845b8c4f to your computer and use it in GitHub Desktop.
Save fitosegrera/f3de73abbf79845b8c4f to your computer and use it in GitHub Desktop.
Download ZIP
example_3 CSS animation (NO JAVASCRIPT)
Raw
index.html
<!--
///////////////////////////////////////
// example_3 web class bootcamp 2014 //
///////////////////////////////////////
//////////// Parsons MFADT ////////////
///////////////////////////////////////
//Created by: fito_segrera
//fii.to
-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<p>GUYS!! THIS EXAMPLE SHOWS HOW TO ANIMATE A DIV WITHOUT USING JAVASCRIPT PURE HTML!</p>
<div>I can move</div>
</div>
</body>
</html>
Raw
style.css
/*
///////////////////////////////////////
// example_3 web class bootcamp 2014 //
///////////////////////////////////////
//////////// Parsons MFADT ////////////
///////////////////////////////////////
//Created by: fito_segrera
//fii.to
This example uses only CSS to move a div and change its color.
It uses WebKit, a HTML/CSS web browser rendering engine for Safari/Chrome.
*/
#wrapper div {
width: 100px;
height: 100px;
background: red;
text-align: center;
font-size: 30px;
position: relative;
-webkit-animation: myfirst 5s; /*Change this to determine the duration of your animation*/
}
p{
font-weight: bold;
}
/* Works only with the following browsers: Chrome, Safari */
@-webkit-keyframes myfirst {
0% {background:red; left:0%; top:0%;}
50% {background:yellow; left:60%; top:0%;}
100% {background:blue; left:0%; top:0%;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment