if "position:absolute" not exist in #box why animation will not work?
I tried this code when "position:absolute" delete it in #box,
but It was not working.
<style>
#box{
**position:absolute;**
width:200px;
height:200px;
background-color:red;
animation:animate 2s none infinite alternate;
}
#keyframes animate{
from{
left:0;
}
50%{
left:500px;
}
to{
left:500px;
}
}
</style>
You shouldn't animate left/right/top/bottom, it is better practice to use transforms. Transforms allow the element to visually move, while their space on the DOM remains, making for safer/smoother animation.
Try this instead
#box {
width: 200px;
height: 200px;
background-color: red;
animation: animate 2s linear forwards infinite alternate;
}
#keyframes animate {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(100px);
}
}
working demo jsfiddle
Related
** why box not rotating but its translating the box . translateX is working but rotate is not working in animation **
<style>
.box{
height: 20px;
width: 20px;
background-color: red;
animation: animate 1s linear infinite alternate;
}
#keyframes animate{
0%{
transform: translateX(100px);
}
100%{
transform: rotate(360deg);
}
}
</style>
<div class="box">
</div>
You need to add both the transform properties in the keyframe, take a look at the snippet below
.box{
height: 20px;
width: 20px;
background-color: red;
animation: animate 1s linear infinite alternate;
}
#keyframes animate{
0%{
transform: translateX(100px) rotate(0deg);
}
100%{
transform: translateX(0) rotate(360deg);
}
}
<div class="box">
</div>
This is because it cannot rotate 360deg at the end of the animation.
Almost anything below 360deg will work. Please provide an illustration or video of the result you are trying to accomplish if this solution is not exactly what you want.
<style>
.box {
height: 20px;
width: 20px;
background-color: red;
animation: animate 1s linear infinite alternate;
}
#keyframes animate {
0% {
transform: translateX(100px);
}
100% {
transform: rotate(180deg);
}
}
</style>
<div class="box"></div>
However if you only want it to spin 360deg and not translateX, you can do it using:
<style>
.box {
height: 20px;
width: 20px;
background-color: red;
animation: animate 1s linear infinite alternate;
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div class="box"></div>
I am trying to move my block element to left with animation and even use animation shorthand property but its not moving.
Here's my HTML:
<div id="game">
<div id="block"></div>
<div id="hole"></div>
<div id="character"></div>
</div>
Here's my CSS:
#game{
width: 400px;
height: 500px;
border: 1px solid black;
margin: auto;
}
#block{
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: mblock 1s infinite linear;
-webkit-animation: mblock 1s infinite linear;
-moz-animation: mblock 1s infinite linear;
}
#-webkit-keyframes mblock {
0%{ left:400px };
100%{ left:-50px };
}
#-moz-keyframes mblock {
0%{ left:400px };
100%{ left:-50px };
}
#keyframes mblock {
0%{ left:400px };
100%{ left:-50px };
}
#hole{
width: 50px;
height: 150px;
background-color: red;
position: relative;
left: 400px;
top: -500px;
animation: mblock 2s infinite linear;
-webkit-animation: mblock 2s infinite linear;
-moz-animation: mblock 2s infinite linear;
}
Here's the JSFIDDLE: https://jsfiddle.net/nwmLpdba/
Any idea what's causing this?
Removing the semi-colon would help.
#keyframes mblock {
0%{ left:400px; } /* no need to add semicolon at the end of the block*/
100%{ left:-50px; } /* no need to add semicolon at the end of the block */
}
#-webkit-keyframes mblock {
100%{ left:-50px };
}
#-moz-keyframes mblock {
100%{ left:-50px };
}
#keyframes mblock {
100%{ left:-50px };
}
please remove the 0%. Because 0% is already set in default class.
I want to have a div, with a word inside. This word should appear with animation when the div is hovered over. This is animating and behaving the way I want, EXCEPT... the word "hello" is visible when the page loads. I want it to be hidden, and then animate into view. What do I need to fix?
#test{
border: 1px solid #000;
}
#hello {
animation-name: hello;
animation-duration: 0.5s;
animation-fill-mode: backwards;
animation-play-state: paused;
}
#hello:hover {
animation-fill-mode: forwards;
animation-play-state: running;
visibility: visible;
}
#keyframes hello {
0% {visibility:(hidden);transform:scale(0.5); opacity:(0.0);}
1% {visibility:(visible);}
50% {transform:scale(1.2); opacity:(0.5);}
100% {transform:scale(1.0); opacity:(1.0);}
}
<div id="test">
<div id="hello">
Hello!
</div>
</div>
You need to simply remove () from the values of properties as it make them invalid. Also it's better to change the opacity in the 1% of the animation to be able to see the scale effect.
You may also remove the visiblity property from the CSS as it's useless since you are using opacity
#test {
border: 1px solid #000;
background:#fff;
overflow:hidden; /* added this to avoid the scroll to appear and disappear*/
}
#hello {
animation-name: hello;
animation-duration: 0.5s;
animation-fill-mode: backwards;
animation-play-state: paused;
}
#test:hover #hello {
animation-fill-mode: forwards;
animation-play-state: running;
/*visibility: visible; can be removed*/
}
#keyframes hello {
0% {
/*visibility: hidden; can be removed*/
transform: scale(0.5);
opacity: 0;
}
1% {
/*visibility: visible; can be removed*/
opacity:0.3;
}
50% {
transform: scale(1.2);
opacity:0.5;
}
100% {
transform: scale(1.0);
opacity:1.0;
}
}
<div id="test">
<div id="hello">
Hello!
</div>
</div>
I'm playing around with CSS animation, and I was wondering if there's a way to make a vertical line (with certain height) to grow in length automatically and turn to left and add an image at the end when the page loads. I was able to draw vertical line but how to turn it to left and add image.
https://jsfiddle.net/29303g27/3/
#cool
{
width:2px;
margin-left:10%;
background-color:#431;
margin-top:35%;
animation:grow 3s forwards;
position:relative;
}
#keyframes grow
{
0% {
height: 0px;
bottom:0;
}
100%{
height: 200px;
bottom:200px;
}
}
<div id=cool>
</div>
By using div inner div
#cool2{
height:0px;
width:1px;
border-bottom:2px solid #000;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
margin-left:10%;
margin-top:0px;
animation-delay:5s;
-webkit-animation-delay:3s;
}
#keyframes increase {
100% {
width: 200px;
}
}
.image
{
width:0px;
height:200px;
left:2px;
top:2px;
-webkit-animation: fade 3s;
-moz-animation: fade 3s;
-o-animation: fade 3s;
animation: fade 3s;
animation-fill-mode: forwards;
margin-left:10%;
margin-top:0px;
animation-delay:6s;
-webkit-animation-delay:6s;
position:absolute;}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
width:200px;
}
}
#cool
{
width:2px;
margin-left:10%;
background-color:#431;
margin-top:35%;
animation:grow 3s forwards;
position:relative;
}
#keyframes grow
{
0% {
height: 0px;
bottom:0;
}
100%{
height: 200px;
bottom:200px;
}
}
<div id=cool>
<div id=cool2>
<img class='image' src='https://www.google.co.in/logos/doodles/2017/sitara-devis-97th-birthday-6469056130449408.5-l.png'>
</div>
</div>
and Check this 2nd way using :after Element
#cool:after{
height:0px;
width:1px;
border-bottom:2px solid #000;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
margin-left:10%;
margin-top:0px;
animation-delay:5s;
-webkit-animation-delay:3s;
position:absolute;
content:'';
}
#keyframes increase {
100% {
width: 200px;
}
}
.image
{
width:0px;
height:200px;
left:2px;
top:2px;
-webkit-animation: fade 3s;
-moz-animation: fade 3s;
-o-animation: fade 3s;
animation: fade 3s;
animation-fill-mode: forwards;
margin-left:10%;
margin-top:0px;
animation-delay:6s;
-webkit-animation-delay:6s;
position:absolute;}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
width:200px;
}
}
#cool
{
width:2px;
margin-left:10%;
background-color:#431;
margin-top:35%;
animation:grow 3s forwards;
position:relative;
}
#keyframes grow
{
0% {
height: 0px;
bottom:0;
}
100%{
height: 200px;
bottom:200px;
}
}
<div id=cool>
<img class='image' src='https://www.google.co.in/logos/doodles/2017/sitara-devis-97th-birthday-6469056130449408.5-l.png'>
</div>
It can be done in many ways. Example
In example I use wrapper element and place line element inside. In this way, line element can use percentage value which relate to wrapper element. It means we don't need to fix height or width just let it grows by image.
<div class='wrapper'>
<img class='image' src='https://images.unsplash.com/photo-1485963631004-f2f00b1d6606?auto=format&fit=crop&w=360&h=180&q=60'>
<div class='line'></div>
</div>
and now animation will be
#keyframes show-up {
0% {
height: 0;
}
50% {
left: 0;
height: 100%;
}
100% {
left: 100%;
height: 100%;
}
}
Looking to build something like this - a spin the wheel - using only HTML and CSS, without Javascript
http://tpstatic.com/_sotc/sites/default/files/1010/source/roulettewheel.html
http://www.dougtesting.net/winwheel
Looking for some references or even to see if it can be done.
This is using the Hover effect of spinning. Since css doesn't have event handlers, you can't add/remove classes. However, you can add hover effects:
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
div:hover {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
Hover to see effect: <div>Spin</div>
If you could use a tiny bit of javascript, you could do something like this:
$('div').click(function(){
$(this).toggleClass("thisIsAdded");
});
div {
height: 100px;
width: 100px;
border-radius: 50%;
background: gray;
margin: 0 auto;
text-align: center;
}
.thisIsAdded {
-webkit-animation: spin 0.8s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click to see:<div>spin</div>
Note:
The script here is purely toggling the class 'thisIsAdded'.
As Justinas pointed out We cant fire css style on click event. You need javascript for that. However you can use CSS animation to achieve the spin effect but only with pseudo-selectors.
below is a sample spin effect using only CSS
<style type="text/css">
.content
{
float:left;cursor:pointer;
}
.content::after
{
content:'>';float:right;margin:0 0 0 10px;
-moz-transition:0.5s all;-webkit-transition:0.5s all;
}
.content:hover::after
{
-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);
}
</style>
<body>
<div class="content">Sample</div>
</body>
Here you go.. Fiddle
CSS:
.circle {
border-radius: 50%;
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }