欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS3 animation 属性

程序员文章站 2024-03-24 18:07:46
...

animation

animation是css3中是一个属性，用来控制图片的动画的。

@keyframes 关键帧

@keyframes name{
   0%{开始状态}
   100%{结束状态}}
}
@keyframes name{
   from{开始状态}
   to{结束状态}}
}

.box{
  animation: run 5s infinite;
}
 
@keyframes run {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}
@keyframes run {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

animation的属性

animation-name：声明要操纵的@keyframes规则的名称。
animation-duration：动画完成一个周期所需的时间。
animation-timing-function：建立预设的加速曲线，例如缓动或线性。
animation-delay：加载元素到动画序列开始之间的时间。
animation-direction：设置循环后动画的方向。 其默认值在每个周期重置。
animation-iteration-count：应该执行动画的次数。
animation-fill-mode：设置在动画之前/之后应用的值。例如，您可以将动画的最后状态设置为保留在屏幕上，或者可以将其设置为切换回动画开始之前的状态。
animation-play-state：暂停/播放动画。

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body,
    html {
        height: 100%;
    }
    body {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .box {
        height: 250px;
        width: 250px;
        margin: 0 auto;
        background-color: red;
        animation-name: run;
        animation-duration: 1.5s;
        animation-timing-function: ease-out;
        animation-delay: 0;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-fill-mode: none;
        animation-play-state: running;
    }
    @keyframes run {
        0% {
            transform: scale(.3);
            background-color: red;
            border-radius: 100%;
        }

        50% {
            background-color: green;
        }

        100% {
            transform: scale(1.5);
            background-color: blue;
        }
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>

上一篇： Google Java Developer Tools Downloads 博客分类： Java

下一篇： memcached缓存失效时的高并发访问问题解决 博客分类： 缓存系列 memcachedjava缓存问题并发 

推荐阅读