CODEWITHSUNDEEP
htmlcsshovertransition
Fiend Two
Fiend Two

Reputation: 13

Unwanted transition on :active css

I've just started learning html & css and I'm not entirely sure what I'm doing but..

I've added a :hover transition so that when I hover over my header "FIENDS" it fades from #000000 to #800000. Which I've implemented and which works. I've also added the css :active, so that when I click my header "FIENDS" it instantly switches from #800000 to #ffffff. But at the moment it isn't instantly switching, it seems to be using the transition I set up for the :hover and fading to #ffffff. Does anyone have a solution to this?

Thanks.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Fiends</title>
        <link href="style.css" type="text/css" rel="stylesheet" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta name="description" content="Fiends" />
</head>
<body>
    <div>
        <h1 class="centertext"><fade>FIENDS</fade></h1>
    </div>
</body>
<html>

CSS

html {
    background-color: #ffffff}

body {
    font-family: bebas neue;
    text-align: center;}

h1 {
    color: #000000;
    font-weight: normal;
    font-size: 200px;
    letter-spacing: 15px;}

h1.centertext {
    margin: 225px auto auto auto}

fade { 
    color: #000000; 
    -webkit-transition: color .12s linear;
    -moz-transition: color .12s linear;
    -ms-transition: color .12s linear;
    -o-transition: color .12s linear;
    transition: color .12s linear;}

fade:hover {
    color: #800000;}

fade:active {
    color: #ffffff}

Upvotes: 1

Views: 589

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191729

You will probably have to use JavaScript to get the full animation effect that you want. You can change the transition property in :active, for example:

fade:active {
    transition: none;
    color: #fff;
}

http://jsfiddle.net/Rppmd/

However the transition is not overridden when it is no longer active so the element will still fade back in (i.e. the solution is not perfect).

With JavaScript you can remove transition entirely and have JS do all the animations. This will allow you to set the animation timing e.g. on hover. On mousedown and mouseup, no animation would be needed, just color change.

Upvotes: 1

Related Questions