css3 动画

最新推荐文章于 2024-04-16 00:12:34 发布

yan_Wylde

最新推荐文章于 2024-04-16 00:12:34 发布

阅读量97

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/yan_Wylde/article/details/119706388

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

注意两个点，一个是@keyframes ，另一个是animation

使用@keyframes规则，你可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，可以更改CSS样式的设定多次。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成。

注意：显然使用百分比的方式更加灵活，可以设置0-100之间的任意一点，可以做出更复杂的动画效果。

例如：

@keyframes changeColor
{
    0%  {background: red;}
    50% {background:green}
    100%    {background: yellow;}
}

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称
规定动画的时长

animation属性如下

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

animation-timing-function的属性值：

值	描述	测试
linear	动画从头到尾的速度是相同的。	测试
ease	默认。动画以低速开始，然后加快，在结束前变慢。	测试
ease-in	动画以低速开始。	测试
ease-out	动画以低速结束。	测试
ease-in-out	动画以低速开始和结束。	测试

cubic-bezier(n,n,n,n)

在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

写一个简单的动画效果：

    <style>
        div{
            width: 200px;
            height: 200px;
            animation: myfirst 5s;
        }
        @keyframes changeColor
        {
            from {background: red;}
            to {background: yellow;}
        } 
    </style>

<body>
    <div></div>
</body>

yan_Wylde

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 动画

首先注意两个点，一个是@keyframes，另一个是animation@keyframes@keyframes 实际上就是创建一个动画，该动画内指定了动画由目前的样式更改为新的样式。例如：@keyframes changeColor{ from {background: red;} to {background: yellow;}}当在@keyframes创建动画，把它绑定到一个选择器，否则动画不会有任何效果。指定至少这两个CSS3的动画属性绑定向一个选择...
复制链接

扫一扫