浅谈CSS3动画

最新推荐文章于 2022-05-21 23:29:04 发布

木偶☜

最新推荐文章于 2022-05-21 23:29:04 发布

阅读量8.1w

点赞数

分类专栏： css web前端文章标签： css3 css 动画前端 web

本文链接：https://blog.csdn.net/qq_45096273/article/details/111184149

版权

web前端同时被 2 个专栏收录

20 篇文章 16 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

前言:特效无疑是炫酷的一个东西,很多网页中都存在这种特效,这也就是我们今天要看的动画.

一.动画

所谓的动画是使元素从一种样式逐渐变化为另一种样式的效果,就是通过CSS代码来对我们需要产生特效的元素的样式进行修改。我们会使用到keyframes来进行动画的操作。

二.keyframes

1.定义：

keyframes:关键帧;格式为:@keyframes animationname {keyframes-selector {css-styles;}}(animationname为动画起的名称,是必需的),在一个 @keyframes 代码块里，包含着一系列的CSS规则，统称为 keyframes。 一个 keyframe 定义了一个完整动画里某一时刻的一种动画样式。动画绘制引擎会连贯平滑的实现各种样式间的转换。我们的状态有:一个是动画的起始状态( “from” 代码块) 和终止状态 ( “to” 代码块)或者可以定义百分比来进行动画,0%-100%之间的数值（from为0%，to为100%）,某一个百分比之间的css样式就会在某一过程进行执行。

 @keyframes name{
 			 from{}
			 to{}
}

或者

 @keyframes name{
 			 0%{}
 			...%
			 100%{}
}

2.绑定事件（animation）：

当然我们定义好动画后并没有结束，我们需要给某一个元素进行动画事件的绑定，否则这个动画就只是个摆设而已，绑定动画我们使用:animation。
animation：顾名思义为动画的意思，其中的参数有：

参数	解释
name	动画名称,是必需的
duration	动画时间,是必需的
timing-function	运动曲线,有linear、ease、ease-in、ease-ou、ease-in-out、steps（）（步长）
delay	动画开始的时间
iteration-count	播放次数，有infinite（无限循环）
direction	是否反向：alternate-reverse（倒着播放）
fill-mode	起始与结束状态
play-state	播放与暂停

分开写法：

    animation-name: ;
    animation-duration: ;
    animation-delay: ;
    animation-iteration-count: ;
    animation-direction: ;
    animation-timing-function: ;
    animation-play-state: ;
    animation-fill-mode: ;

3.复合写法：

annimation:name durtaion timing-function delay iteration-count direction fill-mode play-state;

我们需要注意的一点就是:在动画中name(动画名称)和durtaion(时间)是必需的。

三.举例

我们实现一个div围绕屏幕一周移动的效果:
代码:

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            animation: move 3s linear infinite;
        }
        
        @keyframes move {
            0% {
                background-color: greenyellow;
            }
            25% {
                transform: translate(1000px, 0);
                background-color: bisque;
            }
            50% {
                transform: translate(1000px, 500px);
                background-color: khaki;
            }
            75% {
                transform: translate(0, 500px);
                background-color: skyblue;
            }
            100% {
                transform: translate(0, 0);
                background-color: cadetblue;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>

效果图:
在这里插入图片描述

木偶☜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
浅谈CSS3动画

前言:特效无疑是炫酷的一个东西,很多网页中都存在这种特效,这也就是我们今天要看的动画.目录:一.动画二.keyframes1.定义：2.绑定事件（animation）：3.复合写法：三.举例一.动画所谓的动画是使元素从一种样式逐渐变化为另一种样式的效果,就是通过CSS代码来对我们需要产生特效的元素的样式进行修改。我们会使用到keyframes来进行动画的操作。二.keyframes1.定义：keyframes:关键帧;格式为:@keyframes animationname {keyframes
复制链接

扫一扫