Unable to apply animation to a .png file

Looking to add a cool animation to an image that gradually enlarges it by 10% until it reaches its original size (100%). The animation starts with the image being small and then expands as its top, left, bottom, and right properties increase. Let me know if you need further clarification!

Check out my HTML code:

<!DOCtype html>
    <html>
        <head>
        <meta charset="UTF-8">
        <title> Interactive Webpage Practice - 1 </title>
        <link rel="stylesheet" href="mystyle1.css"/>
        </head>
    <body>
        <span>
        <i> Your webpage is loading...</i><br>
        </span>
        <img src="welcome.png" alt="Lenny face"/>
    </body> 
    </html>

And here's the CSS code: 

* {
    padding: 0px;
    margin:0px;
}

body {
    background-color: white;
}
span {
    margin-top: 10px;
    top: 100%;
    text-align: center;
    font-size: 30px;
    color: rgb(18, 149, 216);
}

img {
    margin-top: 200px;
    margin-left: 500px;
    -webkit-animation-name: welcome_visitor;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-name: welcome_visitor;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@-webkit-keyframes  welcome_visitor {
    visibility: visible;
    0% {top: 0px; left: 0px; bottom: 0px; right: 0px;}
    10% {top: 5px; left: 5px; bottom: 5px; right: 5px; }
    20% {top: 10px; left: 10px; bottom: 10px; right: 10px; }
    30% {top: 15px; left: 15px; bottom: 15px; right: 15px; }
    40% {top: 20px; left: 20px; bottom: 20px; right: 20px; }
    50% {top: 25px; left: 25px; bottom: 25px; right: 25px; }
    60% {top: 30px; left: 30px; bottom: 30px; right: 30px; }
    70% {top: 40px; left: 40px; bottom: 40px; right: 40px; }
    80% {top: 50px; left: 50px; bottom: 50px; right: 50px; }
    90% {top: 60px; left: 60px; bottom: 60px; right: 60px; }
    100% {top: 70px; left: 70px; bottom: 70px; right: 70px; }
}

@keyframes  welcome_visitor {
    visibility: visible;
    10% {top: 5px; left: 5px; bottom: 5px; right: 5px; }
    20% {top: 10px; left: 10px; bottom: 10px; right: 10px; }
    30% {top: 15px; left: 15px; bottom: 15px; right: 15px; }
    40% {top: 20px; left: 20px; bottom: 20px; right: 20px; }
    50% {top: 25px; left: 25px; bottom: 25px; right: 25px; }
    60% {top: 30px; left: 30px; bottom: 30px; right: 30px; }
    70% {top: 40px; left: 40px; bottom: 40px; right: 40px; }
    80% {top: 50px; left: 50px; bottom: 50px; right: 50px; }
    90% {top: 60px; left: 60px; bottom: 60px; right: 60px; }
    100% {top: 70px; left: 70px; bottom: 70px; right: 70px; }
}

https://i.sstatic.net/NVwzK.png

^That's the image used in the HTML page.

htmlcssanimation

Answer №1

Below is a solution that hinges on two crucial elements:

  1. animation-fill-mode: forwards; ensures the final state of the animation remains visible
  2. width: 0; is necessary to establish a starting point for the animation

img {
  width: 0;
  animation: scaleUp linear 1s;
  animation-fill-mode: forwards;
}

@keyframes scaleUp {
  to { width: 307px; }
}
<img src="https://i.sstatic.net/NVwzK.png"/>

If you wish to maintain a 10% increment between frames, consider substituting an easing function with steps(). However, be aware that this approach may result in a less fluid animation:

img {
  width: 0;
  animation: scaleUp steps(10) 1s;
  animation-fill-mode: forwards;
}

@keyframes scaleUp {
  to { width: 307px; }
}
<img src="https://i.sstatic.net/NVwzK.png"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Model not displaying on Apexcharts

Currently, I am using Angular-15 and Bootstrap-5 application for the Apexchart The issue arises when trying to open the Model and the chart does not show up. If I refresh the page and zoom out to 90% or zoom in to 100%, the chart appears. However, upon re ...

cssangulartypescriptapexchartsangular15

Spin the connections around a circular path

I'm interested in creating a website where links rotate around a circle, similar to this example: https://i.sstatic.net/103mx.jpg. The links will display different images and texts leading to various URLs. I want the images to form a unified rotation ...

javascriptjqueryhtmlcssrotation

Displaying photos locally in HTML is not supported

I've encountered an issue with my HTML code. I'm trying to load images from my local drive, and the path to the folder seems correct because I can open the images by ctrl + clicking on them. However, when I open my page using a live server or hos ...

htmlcssimage

What is the reason behind the gray background color showing up exclusively in Google Chrome?

When using other browsers, there are no issues. However, in Chrome, a gray background color appears when hovering over the menu, and partially or completely disappears when moving the mouse away from the menu. Interestingly, it also vanishes completely whe ...

cssgoogle-chromehtml

Taking out arbitrary raphael shapes from the drawing board

In my current project, I am utilizing raphaeljs and socketIO to create a real-time data display. The canvas features circles that represent nodes, and these circles are stored in an object called nodeStatus, with the format nodeStatus[id].obj where the "id ...

javascripthtmlsocket.ioraphael

Ensure that the contents of the upper and lower divs are appropriately aligned, while maintaining the centered positioning of the

As a complete beginner in the world of HTML and CSS, I am facing a challenge with my code. Here's the HTML snippet: <section class="instructions"> <div class="row"> <div class="instructions-col" ...

htmlcss

Ways to attach jQuery live to the entire window?

tag: I want to trigger specific functions whenever the mouse moves, regardless of its position on the browser window. Currently, I am using the following code snippet: $('html').on('mousemove', function(e) { ... } However, this appr ...

javascriptjqueryhtml

Variation in functionality of onclick in javascript

Can you identify the distinction between the two primary lines of JavaScript in this example? HTML: <html> <body> <form> <input type="button" value="one" id="one" /> <input type="button" v ...

javascripthtmlonclick

Steps for incorporating code to calculate the total price and append it to the orderMessage

I am seeking help with this program that my professor assigned to me. The instructions marked by "//" are the ones I need to implement in the code, but I'm struggling to understand how to proceed. Any assistance would be greatly appreciated, even just ...

javascriptcsshtml

Creating a Border Length Animation Effect for Button Hover in Material-UI

I'm currently exploring Material-UI and trying to customize a component. My goal is to add a 'Border Length Animation' effect when hovering over the button. Unfortunately, I have yet to successfully implement this animation as intended. For ...

javascriptcssreactjsmaterial-uicss-animations

Aligning text to the center and having it displayed on either side of it

Hey there, I need help with the following: <div id='1'></div> <div id='2'></div> <div id='3'></div> I want to place a single word into each div. The width of each div should be ...

htmlcss

Determine the present vertical measurement of the video

I am having trouble determining the actual height of a video element. Despite seeing in the developer tools that it is 384px, I am only able to retrieve a height of 342px. I attempted the following code snippet, but it only gives me the natural height, no ...

javascriptjqueryhtmlcsshtml5-video

Showing JSX/HTML content depending on the props received

Can you identify the name of this type of expression and do you know in what scenarios it should be applied? {props.type === "big" && <h2>{props.title}</h2>} ...

javascripthtmlreactjsjsx

JavaScript for validating dimension text input has unique functionalities

I am looking for guidance on validating an ASP textbox using JavaScript. My goal is to validate a user's input in the format of 4-1/2, 80-1/2, 6/8, or simply 5. Only these types of patterns should be allowed, and each input must contain only one numbe ...

javascriptjqueryasp.nethtml

What is the best way to delete a single asterisk from the content of an HTML <td> element?

Looking for a way to remove or replace an asterisk from the inner content of a <td> element. I have a block which includes some text and an input field. For this example, let's say <td> == this $(this)[0].innerHTML "*&nbsp;<input ...

javascriptjqueryhtmlhtml-tableinnerhtml

Tips for adding style to a child component from a parent component with multiple child components

I am faced with a situation where I have a child component in the form of a spinner that I need to display in two different places, each with its own unique style. In order to achieve this, I have attempted the following approach: my-loading-overlay ::ng-d ...

cssangularparent-child

Arranging several collapsible DIVs in the navbar using Bootstrap

Currently, my navbar design includes a search field placed before the menu items. These elements are contained in separate collapsible DIVs to allow for individual toggles. The issue I am facing is that there is a noticeable gap between the search bar an ...

htmlcssbootstrap-4

Using Javascript to iterate through and increase HTML code with values all the way up to 55

I am looking for a way to automatically generate a list of links in an HTML page using JavaScript. I have tried a few scripts, but none have worked for me. This is the current structure of my HTML... <a href="1.html"><img src="images/1.jpg" widt ...

javascripthtmlloopsstatic

Looking for a way to connect a background image in Vue CLI?

When running the code below, I encounter an issue. The code runs properly but the images are not displaying and instead showing the URL as unknown. How can I fix this problem? The images definitely exist. <template> <div class="slider">< ...

javascripthtmlcssvue.jswebpack

Arrange the contents within a div with Bootstrap 4 for proper alignment

Just stepping into the world of front end development and my question might come off as quite basic. Currently, I am delving into ReactJS. https://i.sstatic.net/o9tDo.png My current challenge is related to the following code snippet: <div className=" ...

htmlcsstwitter-bootstrap-3bootstrap-4