I have a webpage where I am trying to animate a picture of a mouse hovering over the page and moving around. But I cant get the stupid thing to work, and it doesnt seem to be throwing up any immediate errors.
code here:
Can someone point me in the right direction? What is wrong with this css? Why isnt it animating the image?
Your code does not specify any dimensions for the div so it has no size for the background to show through.
Also, you do not need to repeat the background-image declaration on every line of the keyframe definition.
div {
background-image: url('http://nanocluster.umeche.maine.edu/mouse.png');
position: relative;
-webkit-animation: myfirst 5s;
/* Chrome, Safari, Opera */
animation: myfirst 5s;
height: 20px;
width: 20px;
background-repeat: no-repeat;
}
#keyframes myfirst {
0% {
left:0px;
top:0px;
}
25% {
left:200px;
top:0px;
}
50% {
left:200px;
top:200px;
}
75% {
left:0px;
top:200px;
}
100% {
left:0px;
top:0px;
}
}
#-webkit-keyframes myfirst {
0% {
left:0px;
top:0px;
}
25% {
left:200px;
top:0px;
}
50% {
left:200px;
top:200px;
}
75% {
left:0px;
top:200px;
}
100% {
left:0px;
top:0px;
}
}
<div></div>
Related
I'm trying to zoom in and zoom out animation using css for preloader but unable to get the desired result
#preloader{
background: black;
background-repeat:no-repeat;
background-size: cover;
background-position:center;
width:100%;
height:100%;
z-index:20;
opacity:1;
position:fixed;
}
#preloader>section{
position:absolute;
height:250px;
width:300px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:url('/img/cropped-Dark-roads-no-more-300x151-removebg-preview.png');
background-repeat: no-repeat;
background-position: center;
}
.preloader-img{
animation:zoomlight 1s ease-in-out infinite;
}
#keyframes zoomlight{
0%{
opacity:0.3;
}
50%{
opacity:1;
filter:drop-shadow(1em 1em 2em white)
}
100%{
}
}
to get a zoom in effect in preloader usuing transform:scale but the effect is not working
I want to keep left side of the box fixed, and increase its width with time so that the right hand side moves horizontally.
I wrote below code. You can try the animation at below link
https://www.w3schools.com/code/tryit.asp?filename=FTCPP2062CMB
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
#keyframes example {
0% {background-color:red; left:0px; top:0px; transform: scale(0.1,1);}
25% {background-color:yellow; left:0px; top:0px; scale(0.1,1);}
50% {background-color:blue; left:0px; top:0px; scale(0.1,1);}
75% {background-color:green; left:0px; top:0px; scale(0.1,1);}
100% {background-color:red; left:0px; top:0px; scale(0.1,1);}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
But it is keeping the centre of square as fixed and moving both sides. How do I keep one side fixed, and only move another horizontally?
You can just animate the width instead of using transform scale.
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
0% {background-color:red; width: 0;}
25% {background-color:yellow;}
50% {background-color:blue;}
75% {background-color:green;}
100% {background-color:red; width: 100px;}
}
<div></div>
You can use transform-origin to achieve this (see MDN documentation).
The transform-origin rule allows you to specify the point of reference (or origin) that a CSS transformation is applied from.
In your case, the key thing is that it your transform origin is relative to the left-hand-side of your <div>, which is achieved by setting the first coordinate of transform-origin to 0% as shown below at both stages of the animation:
div {
width: 100px;
height: 100px;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-timing-function: linear; /* Add this */
}
#keyframes example {
0% {
background-color: red;
left: 0px;
top: 0px;
transform-origin: 0% 0%; /* Add this */
transform: scale(0.1,1);
}
100% {
background-color: yellow;
left: 0px;
top: 0px;
transform-origin: 0% 0%; /* Add this */
transform: scale(1,1);
}
}
I'm kind of new to CSS3 Animations and hope anybody out there could help me realising this.
I'm having a div with text in it. I would like to reveal this div from the center. It looks kind of simple, but until now I didn't find the perfect way to realise it.
Do I need to use
.text-div {
clip-path: inset(top right bottom left);
animate: revealText 3s;
}
#keyframes revealText {
0% {
clip-path: inset(top right bottom left);
},
100% {
clip-path: inset(top right bottom left);
}
}
or would you suggest another way to solve this?
Thanks for your help!
Cara
see here jsfiddle
i used : width:0% on the animation to hide the text , and added white-space:nowrap to initial state of the text so it doesn't go on two separate lines because of the width:0% and added overflow:hidden
play around with the css i gave you , remove some of the things to see how they work
css :
.text-div {
width:100%;
white-space:nowrap;
overflow:hidden;
animation: revealText 3s;
color:white;
text-align:center;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top:45%;
}
.content {
background:red;
height:200px;
width:200px;
position:relative;
}
#keyframes revealText {
0% {
width:0%;
}
100% {
width:100%;
}
}
EDIT you could use pseudo-elements like :before and :after , but this only if you have a background color underneath the text . like in this example red
see here : jsfiddle
css :
.text-div {
color:white;
text-align:center;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top:45%;
}
.text-div:before {
left:0;
}
.text-div:after {
right:0;
}
.text-div:after,.text-div:before {
position:absolute;
content:"";
height:100%;
width:50%;
background:red;
animation: revealText 3s;
}
.content {
background:red;
height:200px;
width:200px;
position:relative;
}
#keyframes revealText {
0% {
width:50%
}
100% {
width:0%
}
}
That's how I realised it in the end. It appears to me, that until now, there is no easier way to do this.
JSFiddle here
.text-div {
position: absolute;
top: 45%;
right: 0;
left: 0;
margin: 0 auto;
text-align: center;
color: white;
clip-path: inset(0px 50% 0px 50%);
-webkit-clip-path: inset(0px 50% 0px 50%);
animation: revealText 3s;
}
.content {
background:red;
height:200px;
width:200px;
position:relative;
}
#keyframes revealText {
0% {
clip-path: inset(0px 50% 0px 50%);
-webkit-clip-path: inset(0px 50% 0px 50%);
}
100% {
clip-path: inset(0px 0px 0px 0px);
-webkit-clip-path: inset(0px 0px 0px 0px);
}
}
Thanks everybody for input!
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.
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