I am a beginner in CSS.Is it possible to move an image up and down smoothly with CSS?
Similar to the following link:
....
Use CSS3 animations.
Snippet:
img {
-webkit-animation: mover 2s infinite alternate;
animation: mover 2s infinite alternate;
}
#-webkit-keyframes mover {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
#keyframes mover {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
<img src="http://app.netbarg.com/img/phone-in-hand-a.png" />
Related
This question already has answers here:
CSS3 Rotate Animation
(7 answers)
Closed 6 months ago.
So I wonder how to rotate a image in HTML, normal speed and using a simple trick.
Somebody could help me?
\*Dont know how to do it*\
<img src="https://google.com/favicon.ico"
You can rotate a img using transform css property
You can try this
img {
transform: rotate(0deg);
animation: rotate 1s infinite;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<img src="https://google.com/favicon.ico" />
im not sure if this what you ask for !
.rotate {
animation: rotation 3s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<img class="rotate" width="100" height="100" src="https://google.com/favicon.ico" />
img {
position: absolute;
width: 100%;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-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); } }
<img src="https://www.google.com/favicon.ico">
No worries, found it out!
Source: https://stackoverflow.com/a/46085346/17699715
I'm trying to rotate a mat-icon
in css I'm using the webkit prefix. For information this code is working on FF.
#keyframes rotateIcon {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#-webkit-keyframes rotateIcon {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
.animatedIcon {
animation: rotateIcon 2s infinite;
-webkit-animation: rotateIcon 2s infinite;
}
In HTML
<mat-icon class="status-icon animatedIcon">
{{getStatusIcon('IN_PROGRESS')}}
</mat-icon>
I'm getting static icon that does not rotate.
Here's a snippet
I'm working on this version of chrome :86.0.4240.75
Try this CSS:
#keyframes rotateIcon {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes rotateIcon {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.animatedIcon {
animation: rotateIcon 2s infinite;
-webkit-animation: rotateIcon 2s infinite;
}
and for HTML, do this:
<mat-icon class="status-icon animatedIcon">
{{getStatusIcon('IN_PROGRESS')}}
</mat-icon>
Solution Details:
You have used the wrong CSS property. The property name is transform and it takes a function rotate(0deg).
I have this:
.about5 {
animation: fade 4s ease forwards, warp 1s linear;
animation-delay: 2s;
}
#keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(95deg);
}
}
#keyframes fade {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes warp {
50% {
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
}
}
<div class="about5">About</div>
<div class="about">About text etc</div>
Why, when I have separated multiple animations by a comma, will the second animation:
#keyframes warp {
50% {
transform: translateZ(-10px) rotateX(60deg)
rotateZ(29deg) rotateY(-180deg);
}
}
#media (min-width: 768px) {.about {
animation:
spin 20s linear infinite, warp 2s linear infinite; animation.
delay: 4s;}}
not take effect?
I want aboutelement to spin and translateZ but it's not working. Is this because of the comma in the wrong place?
It works ok, your problem must be in another place:
.about5 {
animation: fade 16s ease forwards infinite, warp 4s linear infinite;
animation-delay: 2s;
}
#keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes warp {
50% {
transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
}
<div class="about5">About</div>
<div class="about">About text etc</div>
I'm creating a custom marquee for my application.. I want to text animation run only 1 time and stop completely. My code is running repeat after 20s and never stop. I tried replace infinite by "1" ( loop ) and behavior="scroll" but it doesn't work. How to implement it?
html
<li class="marquee" ng-show="notification_message">
<a href="#">
message
</a
</li>
css
#keyframes left-one {
0% {
transform: translateX(100%);
}
10% {
transform: translateX(0);
}
40% {
transform: translateX(0);
}
50% {
transform: translateX(-100%);
}
100% {
transform: translateX(-100%);
}
}
#keyframes left-two {
0% {
transform: translateX(100%);
}
50% {
transform: translateX(100%);
}
60% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.marquee a:nth-child(1) {
animation: left-one 20s ease infinite;
}
.marquee a:nth-child(2) {
animation: left-two 20s ease infinite;
}
I followed the explanations on this jsFiddle page http://jsfiddle.net/gionaf/Ugc5g/ to spin an image on my page http://www.prezzio.net/ but it does not work: the image is not spinning.
To be clear, here is the image to spin:
Here is the original code:
.spin {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-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); } }
<img class="spin" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
Any idea ? Thanks.
The culprit lies in your main_style.css line 369.
Add these lines,
#-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); } }
And it should spin as you expect.
Try this, here is Demo with all Vendor prefixes
img {
animation: 2s spin infinite linear;
}
#keyframes spin {
to {transform: rotate(360deg);}
}
<img src="http://www.prezzio.net/files/theme/spin.png" alt="">