Fun at zangOOr Click Here
0 like 0 dislike
241 views
I would like to animate the image in html with css
in Education & Reference by (790 points) | 241 views

1 Answer

0 like 0 dislike

CSS part

@keyframes pulse { 0% { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } 100% { transform: scale3d(1, 1, 1); } } .pulse { animation-name: pulse; } @keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } 100% { transform: rotate3d(0, 0, 1, 0deg); } } .swing { animation-name: swing; transform-origin: center top 0; } .animated { animation-duration: 2s; animation-fill-mode: both; } .animated.infinite { animation-iteration-count: infinite; }

HTML part below with 2 different style pulse and swing

<img class="swing animated infinite" style="max-width:100%;" src="user.jpg">

OR

<img class="pulse animated infinite" style="max-width:100%;" src="user.jpg">
by

Related questions

2 like 0 dislike
1 answer
1 like 0 dislike
3 answers
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
1 like 0 dislike
1 answer
1 like 0 dislike
1 answer

Where your donation goes
Technology: We will utilize your donation for development, server maintenance and bandwidth management, etc for our site.

Employee and Projects: We have only 15 employees. They are involved in a wide sort of project works. Your valuable donation will definitely boost their work efficiency.

How can I earn points?
Awarded a Best Answer 10 points
Answer questions 10 points
Asking Question -20 points

1,245 questions
1,400 answers
565 comments
4,809 users