Home/ Questions/Q 8071759
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T13:47:48+00:00

I’m trying to highlight a div that wraps a contact form so the user

  • 0

I’m trying to highlight a div that wraps a contact form so the user knows where to go to contact. my link will be something like this

<a href="#form" class="contacthighlight">Contact Us</a>

Going with a class since this will be used on the site in two places.

right now the current background for #form is #f5f5f5 so what I want to do is Flash a random color like #ff0000 and slowly fade it out back to #f5f5f5

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    demo on dabblet.com

    enter image description here
    enter image description here
    enter image description here

    Target pseudo­-class applied to element which you are scrolled to.
    Add this to your css:

    CSS:

    #form {
    background-color: #f5f5f5;
}

#form {
    background-color: #f5f5f5;
}

#form:target {
    animation: target-fade 1s 1;
}

@keyframes target-fade {
    0% { background-color: #ff0000; }
    100% { background-color: #f5f5f5; }
}

    HTML markup:

    <a href="#form"> link to target #form</a>
<form id="form">
    …
</form>

    PS:
    Accordingly to caniuse.com CSS properties: animation and keyframes is needed vendor prefixes such this:

    .box_animation:hover {
  -webkit-animation: myanim 1s infinite; /* value is demo only */
     -moz-animation: myanim 1s infinite;
       -o-animation: myanim 1s infinite;
          animation: myanim 1s infinite;
}

@-webkit-keyframes myanim {…}
@-moz-keyframes myanim {…}
@-o-keyframes myanim {…}
@keyframes myanim {…}

    PPS: dabblet using prefix free JS library to paste all necessary prefixes. Later without this library you can see all you need prefix syntax on css3please

    • 0