What could be causing the animation: fill property to malfunction in CSS (SVG)?

My SVG code has an ID called "logo"

<svg id= "logo" width="918" height="114" viewBox="0 0 918 114" fill="none" xmlns="http://www.w3.org/2000/svg">
  <mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.0880127" y="0.47998" width="918" height="113" fill="black">
  ...
    </svg>

The CSS code is:

#logo{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: fill 0.5s ease forwards 3.5s;
    }
...
}

I want the letters to gradually appear on screen with only outline at first, and then after a delay of 3.5 seconds, they should be filled in. The line animation is working, but the fill animation is not.

csssvg

Answer №1

Adding fill for the id="logo" element instead of the path is the reason, you can refer to my snippet below where I have commented out the code for clarity.

body {
  background: red;
}

#logo {
  width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*animation: fill 0.5s ease forwards 3.5s;*/
}

#logo path:nth-of-type(1) {
  stroke-dasharray: 604.4830322265625;
  stroke-dashoffset: 604.4830322265625;
  animation: line-anim 2s ease forwards;
}

@keyframes line-anim {
  from {
    fill: transparent;
  }

  to {
    fill: white;
    stroke-dashoffset: 0;
  }
}

/*
@keyframes fill{
    from{
        fill: transparent;
    }
    to{
        fill: white;
    }

}*/
<svg id= "logo" width="918" height="114" viewBox="0 0 918 114" fill="none" xmlns="http://www.w3.org/2000/svg">
  <mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.0880127" y="0.47998" width="918" height="113" fill="black">
  <rect fill="white" x="0.0880127" y="0.47998" width="918" height="113"/>
  <path fill="" d="M84 107H70.896L18.192 27.08V107H5.08801V6.48798H18.192L70.896 86.264V6.48798H84V107Z"/>
  <path d="M119.442 17.288V50.84H156.018V61.64H119.442V96.2H160.338V107H106.338V6.48798H160.338V17.288H119.442Z"/>
   <!-- more paths -->
  </mask>
  <path d="M84 107H70.896L18.192 27.08V107H5.08801V6.48798H18.192L70.896 86.264V6.48798H84V107Z" stroke="white" stroke-width="10" mask="url(#path-1-outside-1)"/>
   <!-- more paths -->
</svg>

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

When utilizing dynamic binding within *ngfor in Angular 4, the image fails to display properly

I'm encountering an issue with an <img> tag that isn't behaving as expected in my code snippet: <div *ngFor="let familyPerson of userDataModel.family" class="col-md-6 col-lg-4 family-member"> <div class="fm-wrapper"> ...

htmlcssangular

Conceal the link until the div is hovered over

Is there a way to hide the [Add|Edit] link and only show it when hovering over the handle? The desired outcome is to display "001-001 Item 6" by default, as illustrated in the image. .dd-list { display: block; position: relative; margin: 0; paddin ...

htmlcssasp.net

Bootstrap columns incorrectly stacking in vertical orientation

I'm currently in the process of learning about the Bootstrap grid system. I've implemented the following HTML code to create a row with three columns: <body> <div class="container"> <div class="row"> ...

htmlcssbootstrap-4

Implement a function that runs upon Page Load using Javascript

Here is some Javascript code that loads a map with different regions. When you hover or click on a country, additional information about that country is displayed on the right side of the map. I would like to have a random country already displaying infor ...

javascriptjquerycsspageloadregion

What is the best way to change the heading text and color in React based on the time of day when calling a function?

I want to dynamically change the text and color of my h1 heading based on the time of day. I'm encountering an error with my current code: "Cannot set property 'innerText' of null". I've tried to figure out how to incorpor ...

javascripthtmlcssreactjsjsx

Revamp the appearance of angular material inputs

I have been working on customizing the style of an Angular Material input. So far, I successfully altered the background-color with the following code: md-input-container { padding-bottom: 5px; background-color: #222; } I also changed the placeh ...

javascripthtmlcssangularjsangular-material

Retrieving the value of a radio button using JavaScript

I am working with dynamically generated radio buttons that have been given ids. However, when I attempt to retrieve the value, I encounter an issue. function updateAO(id2) { var status = $('input[name=id2]:checked').val(); alert(status); ...

javascriptjqueryhtmlcss

Why isn't this basic CSS animation executing properly?

I have encountered an issue and I have created a JSFiddle to demonstrate it. http://jsfiddle.net/sqMT6/1/ Basically, when you click on a paragraph, the 'hidden' class is supposed to be set, triggering a webkit animation that makes the paragraph ...

animationcsswebkit

Incorporating JavaScript and CSS files into a content page of a master page in ASP.NET: Steps to follow

I am facing an issue with adding javascript files and css to a content page of a master page in asp.net. I attempted to include a datetime picker on my ContentPage, but it only works on the masterpage. When I try to add the same code to my contentpage, i ...

javascriptcssasp.net

Customizing the design in Sencha with SCSS using the "$base-color" variable

UPDATE : It is crucial that this function properly, so before responding, please take a moment to review any previous comments on the question as your concern may have already been addressed. I am attempting to modify the foundational variables of Sencha ...

cssextjssencha-touchsencha-touch-2sass

What could be the reason for the gap that shows up when transitioning from one image to the

Check out my website at: This section discusses: https://i.sstatic.net/WTTxJ.gif At the bottom of the image, a 'gap' appears. Instead of using standard HTML img tags, I used Next.js Image like this: <Image src="https://ticket- ...

cssimagenext.js

How can I eliminate excess cell spacing from a div that has a display of inline table?

This situation is really frustrating. While using Firefox and Opera, I am encountering unnecessary padding between my nested divs, which is not the case with Chrome and Safari. I attempted to use border-collapse:collapse However, it did not work. Do you ...

csspaddingcss-tables

Bootstrap 4 cards continue to resize instead of adapting to the constraints of the designated space

I've been attempting to implement functionality with bootstrap 4 cards, but I'm running into issues where the card size expands based on the length of the text. Below is my code: <div class="row row-container"> <div class=& ...

htmlcssbootstrap-4

How can I make a DIV occupy the entire vertical space of the page?

I am working on a Google Maps application that takes up the majority of the screen. However, I need to reserve a strip at the top for a menu bar. How can I ensure that the map div fills the remaining vertical space without being pushed past the bottom of ...

csshtml

Is it frowned upon or considered incorrect to achieve a horizontally centered page by adjusting the CSS properties of the html tag?

Is it considered wrong or frowned upon to center a webpage horizontally by adjusting CSS properties of the HTML tag? Sample CSS code: <style type="text/css"> html { width: 1200px; margin: 0px auto; background-color: ...

css

Bootstrap slider with fading in and out effects

I am attempting to create a bootstrap slider that fades in and out when transitioning between slides, similar to the effect demonstrated in this template.. I am using Visual Studio 2010 with ASP.NET. The issue I'm facing is that when the image change ...

htmlcsstwitter-bootstrapsliderfadeout

css overflowing content can disrupt the layout of the screen

I am currently working on creating a modal that will be displayed in the center of the screen with the same width as the main page. However, I am facing an issue where the modal is not perfectly centered. I suspect that this is due to the overflow style ...

cssoverflowwidthscreen

Position the image between two div containers in the center of the screen, ensuring it is responsive and does not overlap with any text

I've been working on trying to position an image between two divs on my webpage. So far, I've managed to place the image there but it's not responsive (only displays correctly at a width of 1920) and ends up overlapping the text in both divs ...

htmlcssresponsive-design

Adapt the size of HTML video tags based on the width of the screen and level of

Within the site (developed with React, utilizing Typescript and Tailwind), there exists a component that allows users to watch videos (constructed using the HTML Video tag). Additionally, beneath the video, there are various dropdowns and buttons. However, ...

cssreactjstypescripttailwind-csshtml5-video

Eliminate the display of Last Modified date and file Size in mod_autoindex

Recently, while developing a file storage webpage for my website, I successfully implemented mod_autoindex for my Apache server. However, I now face the challenge of removing the Last Modified and Size fields from the table. I am hopeful that there is a w ...

htmlcssapachemod-autoindex