So basically I was trying to make a javascript game in HTML (I'm good at HTML but not other languages so I was confused when this problem happened)
so I made sure the syntax was correct, it was. and then did some search on the internet but it didn't help the animation just won't display. I tried many times but it just. won't
so here is the HTML code if you wanted to check it.
#game {
width: 500px;
height: 200px;
border: 1px solid;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block 5s is infinite;
}
#keyframes block {
0% {
left: 480px;
}
100% {
left: 40px;
}
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>
javascript game!
</title>
</head>
<body>
<div id="game">
<div id="player">
</div>
<div id="brick">
</div>
</div>
</body>
</html>
so yeah. thanks in advance
Although you say you have checked the syntax is correct, there should be an 'invalid property value' showing in your devtools on the css for setting the animation for #brick.
It has an 'is' in it. Maybe you meant 1s or maybe you didn't intend for it to be there?
Here's the snippet without it:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>
javascript game!
</title>
<style>
#game {
width:500px;
height:200px;
border: 1px solid ;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block 5s infinite;
}
#keyframes block {
0%{left:480px;}
100%{left:40px;}
}
</style>
</head>
<body>
<div id="game">
<div id="player">
</div>
<div id="brick">
</div>
</div>
</body>
</html>
Incidentally, you will probably find it more efficient (of processor) to use transform translateX rather than reset left position in an animation.
change different animation properties then it work. like animation-name: block; animation-duration: 5s; animation-iteration-count: infinite;
#game {
width:500px;
height:200px;
border: 1px solid ;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left:0;
animation-name: block;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes block {
0%{left:480px;}
100%{left:40px;}
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>
javascript game!
</title>
</head>
<body>
<div id="game">
<div id="player">
</div>
<div id="brick">
</div>
</div>
</body>
</html>
#game {
width:500px;
height:200px;
border: 1px solid ;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block 5s infinite;
}
#keyframes block {
0%{left:480px;}
100%{left:40px;}
}
your code had a bit problem that was the use of "is" in your animation property
Related
I am trying to set transition on changing position of .ball div. But its not working.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.stage{
height: 300px;
width: 300px;
background-color: lightblue;
margin: 50px auto;
position: relative;
}
.ball {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: rgb(119, 40, 40);
position: absolute;
left: 0;
top: 0;
transition: 2s;
}
.stage:hover .ball{
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="stage">
<div class="ball"></div>
</div>
</body>
</html>
I wanted .ball to move from top-left to bottom-right. But its not working
Not sure if this is what you want, but I added the effect on hover, starting from 0 :
<html lang="en">
<head>
<style>
.stage{
height: 300px;
width: 300px;
background-color: lightblue;
margin: 50px auto;
position: relative;
}
.ball {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: rgb(119, 40, 40);
position: absolute;
left: 0;
top: 0;
transition: 2s;
transition-timing-function: ease-in-out;
}
.stage:hover .ball{
top: 100%;
left: 100%;
}
</style>
</head>
<body>
<div class="stage">
<div class="ball"></div>
</div>
</body>
</html>
Let's say for example I have an image of a dog. How do I make when the user hovers over the image, the image disappears and instead has the h1 tag that says "bark"?
Maybe this code snippet can be a solution
<html>
<head>
<style>
#wrap {
width: 128px;
height: 128px;
border: 2px solid black;
display: inline-block;
position: relative;
}
#img {
width: 128px;
position: absolute;
z-index: 2;
top: 0;
transition: all 0.3s ease-in-out 0s;
}
#img:hover {
opacity: 0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Bark!</h1>
<img id="img" src="https://www.iconexperience.com/_img/o_collection_png/green_dark_grey/256x256/plain/dog.png">
</div>
</body>
</html>
Maybe this code snippet can point you in the right direction:
<html>
<head>
<style>
img, h1 {
transition: all 0.3s ease-in-out 0s;
}
h1 {
display: none;
}
img:hover + h1 {
display: block;
}
h1:hover + img {
display: none;
}
img:hover {
display: none;
}
</style>
</head>
<body>
<div>
<img src="http://i.imgur.com/jsdLHHv.png" />
<h1>Bark</h1>
</div>
</body>
You can achieve this through different methods. For my example below on hover on the container it changes the "visibility" property. See sample code below.
.animal-cont{
width: 16%;
height: 120px;
border: 3px #ddd solid;
position: relative;
cursor: pointer;
}
h1 {
left: 50% ;
top: 50%;
transform: translate(-50%,-50%);
margin: auto;
position: absolute;
visibility: hidden;
color: #843f15;
}
img {
max-width: 100%;
}
.animal-cont:hover > img {
visibility: hidden;
}
.animal-cont:hover > h1 {
visibility: visible;
}
<div class="animal-cont">
<h1>Bark!</h1>
<img id="img" src="">
</div>
Can anyone help me please? I don't know how to use animate.css.
.original,
.box {
border-radius: 6px;
}
.original {
background: #eaeaed;
border: 1px dashed #cecfd5;
float: left;
margin: 12px 15px;
}
.box {
background: #2db34a;
height: 95px;
line-height: 95px;
text-align: center;
width: 95px;
}
.spin {
cursor: pointer;
transform-style: preserve-3d;
}
.spin:hover {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
<div class="original">
<div class="spin">
<div class="box box-1">Box 1</div>
</div>
</div>
I dont think that CSS have the property "slideDown".
But you can make somthing like this with CSS trnasition
http://jsbin.com/hiboyoxoha/1/edit
.wrapper {
width: 200px;
height: 100px;
background: #44f;
text-align: center;
color: #fff;
line-height: 100px;
font: 25px arial;
overflow: hidden;
position: relative;
}
.inner {
position: absolute;
height: 100px;
top: -100px;
transition: all 0.5s;
background: #444;
}
.wrapper:hover .inner {
top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">hover me
<div class="inner">Hello i am new div</div>
</div>
</body>
</html>
I'm using some (seemingly) basic css inside of a bootstrap frame, and for some reason once I placed my code into bootstrap it started spazzing out and not displaying images or transforming.
If you go here on Chrome/FF/(Even IE) you can see the images load and transform on mouseover. If you load it up on Safari though it just sits there and only displays what should be the back of the card.
I've been tearing my hair out about this for hours, any advice would be greatly appreciated!
Thanks :)
My code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/dickshit.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="f2_container">
<div id="f2_card" class="shadow">
<div class="front face">
<img src="/cardbacks/default.png" height="359" width="241"/>
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
</div></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
My CSS is:
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
border-radius: 10px;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}
#f1_container {
position: relative;
float: left;
margin: 10px 20px 10px auto;
width: 241px;
height: 359px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
}
#f2_container {
position: relative;
float: left;
margin: 10px 20px 10px auto;
width: 241px;
height: 359px;
z-index: 1;
}
#f2_container {
perspective: 1000;
}
#f2_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f2_container:hover #f2_card {
transform: rotateY(180deg);
}
You are using some CSS that is "not supported" by Safari. What you need to do to fix the problem is to add -webkit- in front of some of them (as specified in the W3schools pages linked below):
transform (http://www.w3schools.com/css/css3_2dtransforms.asp)
transform-style (http://www.w3schools.com/cssref/css3_pr_transform-style.asp)
transition (http://www.w3schools.com/css/css3_transitions.asp)
perspective (http://www.w3schools.com/cssref/css3_pr_perspective.asp)
backface-visibility (http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp)
Once you add the extra code in for those styles, the result will look fine in Safari too (I tested in Safari 5.1.7), and the CSS will be like this:
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
box-sizing: border-box;
border-radius: 10px;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}
#f1_container {
position: relative;
float: left;
margin: 10px 20px 10px auto;
width: 241px;
height: 359px;
z-index: 1;
}
#f1_container {
perspective: 1000px;
-webkit-perspective:1000px;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1.0s linear;
-webkit-transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#f2_container {
position: relative;
float: left;
margin: 10px 20px 10px auto;
width: 241px;
height: 359px;
z-index: 1;
}
#f2_container {
perspective: 1000px;
-webkit-perspective: 1000px;
}
#f2_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1.0s linear;
-webkit-transition: all 1.0s linear;
}
#f2_container:hover #f2_card {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
try adding
.face {-webkit-backface-visibility: hidden; backface-visibility: hidden;}
JSFIDDLE
Hi everyone! I am guessing this might turn our to be a very silly question, but I have blocked... There is a link to JS fiddle with a very simple CSS only image slider. What I want to achieve is when a certain image is selected, I want the coresponding box underneath to remain orange.
Any hints will be highly appreaciated :)
Here is my code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body
{
text-align: center;
}
#images
{
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
margin: 20px auto;
background-color:#ffffff;
}
#images img
{
background-color:#ffffff;
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: -400px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#images img:target
{
left: 0;
z-index: 9;
opacity: 1;
}
#images img:first-child
{
left: 0;
opacity: 1;
}
#slider
{
width:300px;
margin-left:auto;
margin-right:auto;
}
#slider a
{
font-family: 'Segoe UI', 'Century Gothic', sans-serif;
text-decoration: none;
background: #808080;
padding: 1% 7% 1% 7%;
color: #808080;
display:inline-block;
margin-bottom:10px;
}
#slider a:hover
{
background: #ff6a00;
color: #ff6a00;
}
#shadowbox
{
border-radius: 10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
padding-top:5px;
padding-bottom:5px;
width: 400px;
height: auto;
box-shadow: #808080 0 0 7px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="shadowbox">
<div id="images">
<img id="image1" src="A-06.png" />
<img id="image2" src="A-07.png" />
<img id="image3" src="A-05.png" />
<img id="image4" src="Images_Test-01.png" />
</div>
<div id="slider">
.
.
.
.
</div></div>
</body>
</html>
I have added a JQUERY code that would help you
$(document).ready(function(){
$("a").click(function(){
$("a").css("background-color","#808080");
$(this).css("background-color","#ff6a00");
});
});
see the DEMO
This would be easier with JS, of course. The only way I can think to do this with CSS alone would be to place the images inside the <a>s, so that the buttons can share the :target status. So, a bit of recoding involved. :-)