CSS3 animation (动画) 属性、解析总结

Winson℡

已于 2022-11-04 11:06:08 修改

阅读量1.2k

点赞数 1

分类专栏： CSS 文章标签：动画

于 2022-11-04 10:51:24 首次发布

本文链接：https://blog.csdn.net/Winsom1/article/details/127684581

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

@keyframes规定动画

animation 所有动画属性的简写属性，除了animation-play-state属性。

animation-name 动画的名称（必须的）

animation-duration 完成一共用的时间，默认是0s （必须的）

animation-timing-function 速度曲线，默认 ease 步长 steps（）

linear 匀速

ease 默认, 以低速开始，然后加快，在结束前变慢

ease-in 动画以低速开始 , 加速

ease-out 动画以低速结束，减速

ease-in-out 动画以低速开始和结束，先加速后减速

steps（）指定了时间函数中的间隔数量（步长）

animation-delay 何时开始，默认 0s

animation-iteration-count 重复次数，默认 1次， infinite 无限循环

animation-direction 来回播放，默认 normal 不倒回 alternate 逆播放

animation-fill-mode 动画结束状态，默认 backwards 回到起始 forwards 保持

连写

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态；

animation： name duration timing-funcion delay iteration-count direction fill-mode ;

animation: name 1s ease 0s infinite alternate forwards；

animation-play-state 鼠标放上运行或暂停，默认 running不暂停 pause 鼠标放上暂停

暂停动画：animation-play-state：puased；经常和 :hover 经过等其他配合使用

CSS动画效果（animation属性）解析

基础使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @keyframes moveAndchange {
        0%{
            left: 0px;
            top: 0px;
        }
        25%{
            left: 200px;
            top: 200px;
            background: orange;
            border-radius: 0;
        }
        50%{
            left: 400px;
            top: 200px;
            background: orangered;
            border-radius: 50%;
        }
        75%{
            left:400px;
            top: 0px;
            background: palegreen;
            border-radius: 0px;
        }
        100%{
            left: 0px;
            top: 0px;
            background: aliceblue;
            border-radius: 50%;
        }
    }
    div{
            width: 200px;
            height: 200px;
            margin: 200px;
            position: absolute;
            background: aqua;
            border-radius: 50%;
            animation: moveAndchange 10s;
            animation-timing-function: ease-out;
            animation-delay :2s;
            animation-timing-function: 2;
        }
</style>
<body>
    <div></div>
</body>
</html>

总结
1、keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
2、在一个“@keyframes”中的样式规则可以由多个百分比构成的。
如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。
3、用cubic-bezier设置动画的速度曲线，它是由曲线的斜率决定速度的快慢。

Winson℡

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 animation (动画) 属性、解析总结

animation 所有动画属性的简写属性，除了animation-play-state属性。运动曲线何时开始播放次数是否反方向动画起始或者结束的状态；默认, 以低速开始，然后加快，在结束前变慢。动画以低速开始和结束，先加速后减速。动画结束状态，默认。动画以低速结束，减速。完成一共用的时间，默认是0s （必须的）:hover 经过等其他配合使用。infinite 无限循环。
复制链接

扫一扫