css-transition-sample

by Nobuyuki Osawa

HTML

<section>
    <h3>Jiwa-Jiwa</h3>
    <div class="sample">koko no haikei ga kawarimasu.</div>
</section>

<section>
    <h3>Shutt-Jiwa</h3>
    <div class="sample2">subayaku haikei ga kawatte jiwari to modoru.</div>
</section>

CSS

.sample {
    padding: 20px;
    background-color: #efefef;
    transition: background-color 1s linear;
}
.sample:hover {
    background-color: green;
}

.sample2 {
    padding: 20px;
    background-color: #efefef;
    transition: background-color 1s linear;
}
.sample2:hover {
    background-color: green;
    transition: background-color 0.1s linear;
}