I am currently experimenting with CSS animations because I find them extremely cool.
My current project involves creating a navigation bar on the left side of the page. I want the bar to stretch to 100% of the page's height. However, when I set this property for the height, the bar disappears from view. Is it possible that CSS animations do not support % based height and width?
Here is my CSS:
body{
overflow: hidden;
padding: 0;
overflow-x: hidden
}
div {
-webkit-animation:myfirst 4s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
font-size: .2px;
padding-left: 5px;
}
@-webkit-keyframes myfirst /* Safari and Chrome */{
0% {
background:orange;
width: 100px;
height: 100px;
-webkit-transform:rotate(360deg);
opacity: 0.7;
}
100% {
background:orange;
width: 100px;
height: 100%;
-webkit-transform:rotate(360deg);
opacity: 0.7;
font-size: 16px;
}
The HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/sidebar_left.css">
</head>
<body>
<div></div>
</body>
</html>