使用animation和keyframes实现循环动画

<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>使用animation和keyframes实现循环动画</title>
<style type="text/css">
/********** 创建名为heartbeat的动画(设置关键帧) **********/
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    11.11111111% {
        transform: scale(1.05);
    }

    22.22222222% {
        transform: scale(1.1);
    }

    33.33333333% {
        transform: scale(1.15);
    }

    44.44444444% {
        transform: scale(1.2);
    }

    55.55555555% {
        transform: scale(1.25);
    }

    66.66666666% {
        transform: scale(1.2);
    }

    77.77777777% {
        transform: scale(1.15);
    }

    88.88888888% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1.05);
    }
}

.demo {
    display: block;
    margin: 250px auto 0;
    animation-name: heartbeat; /* 核心属性:使用上面创建的heartbeat动画 */
    animation-duration: 1500ms; /* 核心属性:动画完成一个周期所需时间 */
    animation-iteration-count: infinite; /* 核心属性:动画播放次数,若为infinite则无限次播放 */
}
</style>
</head>
<body>
<img alt="心跳动画" class="demo"
     src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAJPUExURUdwTMxJTKw7RdlEQqU1T2mk1tBITKxHVcpGSphEXslITUBspsVCRMlLTitSk7dEUyxVl7xDUeBCP7crJ5klMLg7Tfdnd9NRUrc+TrtCUoYmOowaHo4lL3kqRKQpLKgnIydKhShNjrNGV+NPUOhbX8UnIasrLWWbzTpallGAuG+j0CE+dSdNiSs/b+lNS5ElMpQ0S9xaVdZNTdRNTkJtqWSbzuA7NeVOUpguSY8yQOJhYkBwtGql1vtjcYU0SqwmKtc4NV6W0NRsdsY3N1yHsitVm147Ymo8aPNfa9hOSP6Unv9yh/dlePqNlqUcMq0hM7AoOPBfd+hYcPyYoNVMTfmTmqcYKz1tsNFbYkl+w/SHjq4XKzZkqeNVbrw6RutcdOp5fddVVmKc1NlQaME3OdUyLNxeYLckMYkhNTFcnpwzR9NLZPKPlrklIKgjNblAVUR4urIvPbc0QeZCP95scN45NPNYXMgvKt5TbF2Vy7YZK89IR/1vgsImI/xrfeJ0ea0gHFGEvsdEXb0wPrYuN8FDTfZeZ3i24NZmbc1RWOxLSnKt2u+ChuZwcpMeM8dKUvBRUyxTlE6Izcg6OcxIYVqT1s5BQ6UlKrsvLuJoaWE3WGpbhrE6VLApKKAbH3shNyRKh806PIRAWo8sQ3ZHaKMvOL9CW1eNxis9cpcnN15Ld+ZiYUFTh4coRHcwS1FlnZZGXZJkhMh9kvR/g4ZRb1YqSud+hKRZbZJ+pq18mWwqRbxSXahDUZgeKU9zrnpslcRpemtvoqtIXatng3mbyPCoB30AAACmdFJOUwBA/v7+/nkMGgNRGv40MJ7W7o+nS/x0q9nGJ/09cYbRj05iKeP34m1vjVTE7a7Rn/3w59XwgNf55MW70o3p9Pa71qDmvavfgMa+//////////////////////////////////////////7///////////////////////////////////////////////////////////////////////////////4XNf2wAAAI5klEQVRYw63Y91da2RYAYEQsWGNLbIlpK73OpEwyfeZVc6kDiChNqoAgiIA0kTZgFFGJIkVj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">
</body>
</html>

Copyright © 2024 码农人生. All Rights Reserved