12/08/2018, 14:43

Simple CSS3 transition that will wow your users

Not all elements use the transition property. We can also create highly complex animations using @keyframes, animation and animation-iteration. In this case, we’ll first define a CSS animation in your styles. You’ll notice that due to implementation issues, we need to use ...

Not all elements use the transition property. We can also create highly complex animations using @keyframes, animation and animation-iteration. In this case, we’ll first define a CSS animation in your styles. You’ll notice that due to implementation issues, we need to use @-webkit-keyframes as well as @keyframes (yes, Internet Explorer really is better than Chrome, in this respect at least).

HTML

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    body > div
    {
      awidth:483px;
      height:298px;
       background:#676470;
       transition:all 0.3s ease;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

CSS

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
.swing:hover
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}

Source and demo and more: http://www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/

Bình luận về bài viết này

Hoàng Hải Đăng

24 chủ đề

7226 bài viết

Simple CSS3 transition that will wow your users

Not all elements use the transition property. We can also create highly complex animations using @keyframes, animation and animation-iteration. In this case, we’ll first define a CSS animation in your styles. You’ll notice that due to implementation issues, we need to use ...

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI