Animation and li::marker Aren’t Working

Question:
So I am making a digital cook book with all the different recipes my family uses, and when you open up the accordion menus in the content there is supposed to be an animation and not just appearing and disappearing. I also am trying to add some styling to the li::marker (Phind says it should work) and add more than just text color.

Repl link:
https://replit.com/@SalladShooter/DigitalCookBook

CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

@media (prefers-color-scheme: dark) {
    :root {
        --back: #212425;
        --back-accent: #313435;
        --fore: white;
        --primary: #1c96c0;
        --danger: #f04a64f;
        --shadow: rgba(0,0,0,0.3);
        --font: 'Poppins', Arial; 
    }
}
@media (prefers-color-scheme: light) {
    :root {
        --back: white;
        --back-accent: #eee;
        --fore: black;
        --primary: #1c96c0;
        --danger: #f04a64f;
        --shadow: rgba(0,0,0,0.3);
        --font: 'Poppins', Arial; 
    }
}

html {
    width: 100%;
    height: 100%;
    background: var(--back);
    color: var(--fore);
    font-family: var(--font);
}

h1 {
    text-align: center;
}

.dropdown {
    max-width: 13em;
    margin: auto;
    margin-top: 5em;
    padding-bottom: 2.5em;
    position: relative;
    width: 100%;
}

.dropdown-btn {
    font-size: 18px;
    width: 100%;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7em 0.5em;
    cursor: pointer;
    border-bottom: 2px solid var(--primary);
    margin-bottom: 1em;
}

.arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--fore);
    transition: transform ease-in-out 0.3s;
}

input[type="checkbox"]:checked ~ .dropdown-content {
   opacity: 1;
   transform: translateY(0);
}

.dropdown-content {
    margin: 0;
    position: absolute;
    width: 100%;
    opacity: 0;
    left: 0;
}

@keyframes drop-in {
    from {
        transform: translateY(-2em);
    }
    to {
        transform: translateY(0em);
    }
}

.dropdown-content li {
    background: var(--back-accent);
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    box-shadow: 0 5px 5px 0 var(--shadow);
    margin-bottom: 0.5em;
    animation: drop-in 0.5s ease-in-out forwards;
    animation-delay: calc(60ms * var(--delay));
}

li::marker {
    background: var(--back-accent);
    border-bottom-left-radius: 0.5em;
    margin-right: 0.1em;
    border-top-left-radius: 0.5em;
    color: var(--primary);
    box-shadow: 0 5px 5px 0 var(--shadow);
}

.dropdown-content.menu-open li {
    left: 0;
    transform: translateY(0);
}

.dropdown-content.menu-open {
    opacity: 1;
    transform: translateY(0);
}

input[type="checkbox"]:checked + label > .arrow {
   transform: rotate(180deg);
}

input[type="checkbox"] {
    opacity: 0;
    position: absolute;
}

input[type="checkbox"]:focus + label {
    box-shadow: 0 0 20px var(--shadow);
}

.dropdown-content li:hover {
    background: var(--primary);
}

.dropdown-content li a {
    display: block;
    padding: 0.7em 0.5em;
    margin: 0.1em 0;
    color: var(--fore);
    text-decoration: none;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
} 
HTML
{% extends 'base.html' %}

{% block title %}DigitalCookBoox{% endblock %}

{% block content %}
    <h1>DigitalCookBook</h1>
    <div class="dropdown">
      <input type="checkbox" id="dropdown1" />
      <label for="dropdown1" class="dropdown-btn">
        <span>Breakfast</span>
        <span class="arrow"></span>
      </label>

      <ol class="dropdown-content">
        <li style="--delay: 1;"><a href="#">Buttermilk Pancakes</a></li>
        <li style="--delay: 2;"><a href="#">French Toast Casserole</a></li>
      </ol>
    </div>
    <div class="dropdown">
      <input type="checkbox" id="dropdown2" />
      <label for="dropdown2" class="dropdown-btn">
        <span>Lunch</span>
        <span class="arrow"></span>
      </label>

      <ol class="dropdown-content">
        <li style="--delay: 1;"><a href="#">Pizza</a></li>
        <li style="--delay: 2;"><a href="#">Test</a></li>
      </ol>
    </div>
{% endblock %} 

You can enhance the animation you made to make it smoother for the opacity/transform properties.

For example:

.dropdown-content {
    margin: 0;
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateY(-2em);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease;
    left: 0;
}

input[type="checkbox"]:checked ~ .dropdown-content {
    opacity: 1;
    transform: translateY(0);
}

About the ::marker… I know that CSS have some limits to support styling for ::marker and I think adding a background to the ::marker is not possible with just CSS, meaning that you will need to use some javascript (so you can dynamically add elements).

1 Like

@WindLother the animation is working, but the delay for each li child isn’t working.

CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

@media (prefers-color-scheme: dark) {
    :root {
        --back: #212425;
        --back-accent: #313435;
        --fore: white;
        --primary: #1c96c0;
        --primary-accent: #3cb6e0;
        --danger: #f04a64f;
        --shadow: rgba(0,0,0,0.3);
        --font: 'Poppins', Arial; 
        --radius: 10px;
    }
}
@media (prefers-color-scheme: light) {
    :root {
        --back: white;
        --back-accent: #eee;
        --fore: black;
        --primary: #1c96c0;
        --primary-accent: #3cb6e0;
        --danger: #f04a64f;
        --shadow: rgba(0,0,0,0.3);
        --font: 'Poppins', Arial; 
        --radius: 10px;
    }
}

html {
    width: 100%;
    height: 100%;
    background: var(--back);
    color: var(--fore);
    font-family: var(--font);
}

h1 {
    text-align: center;
}

.container {
    margin: auto;
    margin-left: 10vw;
    margin-right: 10vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

.dropdown {
    max-width: 13em;
    margin: auto;
    margin-bottom: 1em;
    padding-bottom: 2.5em;
    position: relative;
    width: 100%;
}

.dropdown-btn {
    font-size: 18px;
    width: 100%;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7em 0.5em;
    cursor: pointer;
    border-bottom: 2px solid var(--primary);
    margin-bottom: 1em;
    background: transparent;
    transition: all 0.3s ease-in-out
}

.dropdown-btn:hover {
    border-radius: var(--radius); 
    background: linear-gradient(to left top, var(--primary), var(--primary-accent));
    border: none;
}

.arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--fore);
    transition: transform ease-in-out 0.3s;
}

.dropdown-content {
    margin: 0;
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateY(-2em);
    transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
    left: 0;
    display: flex;
    flex-direction: column;
}

input[type="checkbox"]:checked ~ .dropdown-content {
    opacity: 1;
    transform: translateY(0);
}

@keyframes drop-in {
    from {
        transform: translateY(-2em);
    }
    to {
        transform: translateY(0em);
    }
}

.dropdown-content li {
    flex: 1;
    background: var(--back-accent);
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    box-shadow: 0 5px 5px 0 var(--shadow);
    margin-bottom: 0.5em;
    animation: drop-in 0.5s ease-in-out forwards;
    animation-delay: calc(60ms * var(--delay));
}

li::marker {
    background: var(--back-accent);
    border-bottom-left-radius: 0.5em;
    margin-right: 0.1em;
    border-top-left-radius: 0.5em;
    color: var(--primary);
    box-shadow: 0 5px 5px 0 var(--shadow);
}

.dropdown-content.menu-open .dropdown-content:last-child {
    margin-bottom: 5em;
}

.dropdown-content.menu-open li {
    left: 0;
    transform: translateY(0);
}

.dropdown-content.menu-open {
    opacity: 1;
    transform: translateY(0);
}

input[type="checkbox"]:checked + label > .arrow {
   transform: rotate(180deg);
}

input[type="checkbox"] {
    opacity: 0;
    position: absolute;
}

input[type="checkbox"]:focus + label {
    box-shadow: 0 0 20px var(--shadow);
}

.dropdown-content li:hover {
    background: var(--primary);
}

.dropdown-content li a {
    display: block;
    padding: 0.7em 0.5em;
    margin: 0.1em 0;
    color: var(--fore);
    text-decoration: none;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
} 

Did you define the --delay where it’s being used? Check if that each li element in your HTML has the --delay variable.

@WindLother all of my li’s have the --delay variable →

{% extends 'base.html' %}

{% block title %}DigitalCookBoox{% endblock %}

{% block content %}
    <h1>DigitalCookBook</h1>
    <div class="container">
        <div class="dropdown">
          <input type="checkbox" id="dropdown1" />
          <label for="dropdown1" class="dropdown-btn">
            <span>Breakfast</span>
            <span class="arrow"></span>
          </label>
    
          <ol class="dropdown-content">
            <li style="--delay: 1;"><a href="#">Buttermilk Pancakes</a></li>
            <li style="--delay: 2;"><a href="#">French Toast Casserole</a></li>
            <li style="--delay: 3;"><a href="#">Test</a>
          </ol>
        </div>
        <div class="dropdown">
          <input type="checkbox" id="dropdown2" />
          <label for="dropdown2" class="dropdown-btn">
            <span>Lunch</span>
            <span class="arrow"></span>
          </label>
    
          <ol class="dropdown-content">
            <li style="--delay: 1;"><a href="#">Pizza</a></li>
            <li style="--delay: 2;"><a href="#">Test</a></li>
          </ol>
        </div>
        <div class="dropdown">
          <input type="checkbox" id="dropdown3" />
          <label for="dropdown3" class="dropdown-btn">
            <span>Breakfast</span>
            <span class="arrow"></span>
          </label>

          <ol class="dropdown-content">
            <li style="--delay: 1;"><a href="#">Buttermilk Pancakes</a></li>
            <li style="--delay: 2;"><a href="#">French Toast Casserole</a></li>
            <li style="--delay: 3;"><a href="#">Test</a>
          </ol>
        </div>
        <div class="dropdown">
          <input type="checkbox" id="dropdown4" />
          <label for="dropdown4" class="dropdown-btn">
            <span>Lunch</span>
            <span class="arrow"></span>
          </label>

          <ol class="dropdown-content">
            <li style="--delay: 1;"><a href="#">Pizza</a></li>
            <li style="--delay: 2;"><a href="#">Test</a></li>
          </ol>
        </div>
    </div>
{% endblock %}