I try to rotate :before element but it won't rotate. Please, tell me, what I'm doing wrong.
http://jsfiddle.net/holden321/h7eEB/
HTML:
<div>hello</div>
CSS:
div {
height:25px;
line-height:25px;
padding-left:35px;
position:relative;
}
div:before {
content:"";
position:absolute;
left:0;top:0;
height:25px;
width:25px;
background:url(http://lorempixel.com/20/20/) no-repeat center;
-webkit-transform:rotate(0deg);
-webkit-animation-iteration-count:infinite;
-webkit-animation: rotate 2s;
}
#-webkit-keyframes rotate {
100% { transform: rotate(360deg); }
}
Forgot the prefix in the animation property transform:
#-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
Working Demo
Edit : To make the iteration-count work change the order in CSS, first set the animation and then his properties:
-webkit-animation: rotate 2s; /*This First*/
-webkit-transform:rotate(0deg);
-webkit-animation-iteration-count:infinite;
The Fiddle Demo
Related
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
.box1{
width:200px;
height:200px;
background-color: #FFF8DC;
position:absolute;
top:200px;
left:20%;
margin-left:-100px;
}
.box1.hover {
-webkit-animation: moving-image 2s 1;
}
#-webkit-keyframes moving-image {
from { -webkit-transform: rotate(0deg) scale(1);
}
to { -webkit-transform: rotate(360deg) scale(1.3);}
}
<div class='box1'></div>
When you hover over a box I want it to increase its size and rotate it 360 degrees once. When you remove the cursor from the box I want it to go back to its original shape. I have put my code below and I don't know what's wrong with it.
.box1{
width:200px;
height:200px;
background-color: #FFF8DC;
position:absolute;
top:200px;
left:20%;
margin-left:-100px;
}
#-webkit-keyframes moving-image {
from { -webkit-transform: rotate(0deg) scale(1);
}
to { -webkit-transform: rotate(360deg) scale(1.3);}
}
.box1.hover {
-webkit-animation: moving-image 2s 1;
}
I think I have what you're looking for:
There is no need for webkit keyframes & all of that stuff. All I did was add a :hover effect and a css transition (which makes the spin effect)
.box1{
width:200px;
height:200px;
background-color: red;
position:absolute;
top:200px;
left:20%;
margin-left:-100px;
transition: all ease 1s;
}
.box1:hover{
transform: rotate(360deg) scale(1.3);
}
<div class="box1"></div>
Edit:
Your version would've worked fine as well if you change the
.box1.hover {
-webkit-animation: moving-image 2s 1;
}
to
.box1:hover {
-webkit-animation: moving-image 2s 1;
}
Both can be done with transform, like so:
.myClass {
transform: scale(1.3) rotate(360deg);
}
but to be on the safe side, you should take care of older browsers:
.myClass {
-moz-transform: scale(1.3) rotate(360deg);
-webkit-transform: scale(1.3) rotate(360deg);
-o-transform: scale(1.3) rotate(360deg);
-ms-transform: scale(1.3) rotate(360deg);
transform: scale(1.3) rotate(360deg);
}
The last line should be the standard css3 directive.
How can I animate text on a webpage and increase its size while keeping the center anchored at a point? This is what I have tried:
http://jsfiddle.net/wnn2v023/1/
but as can be seen, the anchor point is at (0, 0) instead of the text center. I tried playing around with text-align but couldn't get desired result.
HTML:
<button id="button">
Begin
</button>
<div id="main">
<div id="div">
Hello World!
</div>
</div>
CSS:
#main
{
position: relative;
}
#div
{
position:absolute;
font-size:0em;
}
#-webkit-keyframes my-animation {
0% { font-size: 0em; }
100% { font-size: 5em; }
}
.effect {
-webkit-animation: my-animation 1s; /* Safari 4+ */
animation: my-animation 1s;
animation-fill-mode: forwards;
}
JS:
var e = document.getElementById("button");
var div = document.getElementById("div");
e.addEventListener("click", function()
{
div.className = "effect";
});
Note that I cannot make any changes to the main div. Also I found using the font-size to animate does not give a very smooth animation.
Rather than animating the font-size property, animate transform: scale().
Set the desired font-size on the text along with transform: scale(0) and then animation it to its default scale of transform: scale(1):
document.getElementById('button').addEventListener("click", function() {
document.querySelector('.text').classList.toggle("effect");
});
.container {
position: relative;
}
.text {
position: absolute;
transform: scale(0);
font-size: 5em;
}
#-webkit-keyframes grow {
100% { transform: scale(1); }
}
#keyframes grow {
100% { transform: scale(1); }
}
.effect {
-webkit-animation: grow 1s forwards;
animation: grow 1s forwards;
}
<button id="button">Begin</button>
<div class="container">
<span class="text">Hello World!</span>
</div>
You need to specifiy margin:0 auto, try this:demo
changed only the css part,
#main {
position: relative;
}
#div {
margin:0 auto;;
text-align: center;
width:82%;
}
#-webkit-keyframes my-animation {
0% {
font-size: 0em;
}
100% {
font-size: 5em;
}
}
.effect {
-webkit-animation: my-animation 1s;
/* Safari 4+ */
animation: my-animation 1s;
animation-fill-mode: forwards;
}
`
I am relatively a newbie in the field of CSS. I have seen the #KEYFRAME element for displaying an animation that moves from one side to another. But I was just wondering how is it possible to move an image(in terms of an animation) that moves from one side to another as the page loads?
All answers are appreciated in advance
Thanks
div
{
width:100px;
height:100px;
background:red;
position:relative;
-webkit-animation:myfirst 5s; /* Chrome, Safari, Opera */
animation:myfirst 5s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
/* Standard syntax */
#keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
Please check the following fiddle for a back and forth image animation http://jsfiddle.net/jHHnN/ In the html apply the class "imganim" to the image tag and add the below CSS
.imganim
{
width:100px;
height:100px;
position:relative;
-webkit-animation:myfirst 5s infinite; /* Chrome, Safari, Opera */
animation:myfirst 5s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% { left:0px; top:0px;-webkit-transform:rotate(0deg)}
50% {left:100%; margin-left:-100px;-webkit-transform:rotate(360deg)}
100% {left:0px; top:0px;-webkit-transform:rotate(0deg)}
}
/* Standard syntax */
#keyframes myfirst
{
0% { left:0px; top:0px;transform:rotate(0deg)}
50% {left:100%; margin-left:-100px;transform:rotate(360deg)}
100% {left:0px; top:0px;transform:rotate(0deg)}
}
You can use transform css3 property
see this example : http://jsfiddle.net/R65pL/
<span>
<img src="https://pbs.twimg.com/profile_images/1134660580/Puerco_Potter.jpg" alt="">
</span>
span{
width: 100%;
padding: 30px;
display inline-block;
}
img{
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4se;
-o-transition: all .4s;
transition: all .4s;
}
img:hover{
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
see more in : http://www.w3schools.com/css/css3_transitions.asp
clock Here ho read a complete guide about css animations.
On my little testing html page, I have 4 elements. These elements play a CSS animation when hovered over, but I would like the animation to go reverse when the user stops hovering over them.
-webkit-animation-direction:alternate;
didn't work. My current code is as follows:
<style>
div:hover{
-webkit-animation: animationFrames ease 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 0% 0%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-webkit-animation-direction:alternate;
}
#-webkit-keyframes animationFrames {
0% {
opacity:1;
-webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ;
}
20% {
-webkit-transform: rotate(60deg) ;
}
40% {
-webkit-transform: rotate(40deg) ;
}
60% {
-webkit-transform: rotate(54deg) ;
}
80% {
-webkit-transform: rotate(42deg) ;
}
100% {
opacity:1;
-webkit-transform: rotate(46deg) scaleX(1) scaleY(1) ;
}
}
.testje1
{
background: black;
width:48px;
height:20px;
position:absolute;
left:200px;
top:200px;
}
.testje2
{
background: black;
width:48px;
height:20px;
position:absolute;
left:300px;
top:200px;
}
.testje3
{
background: black;
width:48px;
height:20px;
position:absolute;
left:400px;
top:200px;
}
.testje4
{
background: black;
width:48px;
height:20px;
position:absolute;
left:500px;
top:200px;
}
p
{
position:absolute;
top:-14;
left:2;
color:white;
}
</style>
<a href="http://www.redrumbureau.com" target="_blank" >
<div class="testje1"><p>home</p></div>
</a>
<a href="http://www.redrumbureau.com/work" target="_blank">
<div class="testje2"><p>home</p></div>
</a>
<a href="http://www.redrumbureau.com/clients" target="_blank">
<div class="testje3"><p>clients</p></div>
</a>
<a href="http://www.redrumbureau.com/about" target="_blank">
<div class="testje4"><p>about</p></div>
</a>
All help greatly appreciated!
Use reverse to make the animation go "backwards":
-webkit-animation-direction:reverse;
Here's a nice detailed tutorial on keyframes by CSS tricks if you'd like to learn more about the options available to you.