CSS动画

最新推荐文章于 2024-08-21 16:08:40 发布

释~～

最新推荐文章于 2024-08-21 16:08:40 发布

阅读量499

点赞数 2

分类专栏： css 文章标签： css3 html css

本文链接：https://blog.csdn.net/weixin_51517351/article/details/114481354

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS动画

css3实现动画效果常用方法

css3实现动画效果常用方法

1 、css变形属性

CSS3第二个相关属性就是transform，CSS3中transform属性允许我们对元素进行旋转、缩放、移动、倾斜，向元素应用2D或3D转换。

transform属性的基本语法：transform：none | transform-functions；

在上面的语法中， transform属性的默认值是none，适用于内联元素和块元素，表示不进行变形。 transform-functions属性用于设置变形函数，可以是一个或者多个变形函数列表。

2D转换

函数名	描述
rotate(angel)	旋转元素
skew(x- angel,y- angel)	倾斜元素
skewX(angel)	沿着x轴倾斜元素
skewY(angel)	沿着y轴倾斜元素
scale(x, y)	缩放元素，改变元素的高度和
scaleX(x)	改变元素的宽度
scaleY(y)	改变元素的高度
translate(x,y)	移动元素对象，基于x和y坐标重新定位元素
translateX(x )	沿着×轴移动元素
translateY(y)	沿着y轴移动元素
matrix(n, n,n,n, n,n )	2D转换矩阵

<body>
   <style>
       .a{
           margin: 20px;
           width: 150px;
           height: 50px;
           background-color: #f10215;
           font-weight: 700;
           font-size: large;
           float: left;
       }
       .trans1{
           transform:rotate(30deg);
       }
       .trans2{
           transform:skew(30deg);
       }
       .trans3{
           transform:scale(0.8);
       }
       .trans4{
           transform:translate(5,50px);
       }
   </style>
   <div class="a">不设置变形</div>
   <div class="a trans1">rotate(30deg)</div>
   <div class="a trans2">skew(30deg)</div>
   <div class="a trans3">scale(0.8)</div>
   <div class="a trans4">translate(5,50px)</div>
</body>

在这里插入图片描述

3D转换

函数名	描述
rotate3d(x,y, z, angel)	定义3D旋转
rotateX(angel)	沿着x轴3D旋转
rotateY(angel)	沿着y轴3D旋转
rotateZ(angel)	沿着Z轴3D旋转
scale3d(x,y, z)	定义3D缩放
scaleX(x)	沿着x轴缩放
scaleY(y)	沿着y轴缩放
scaleZ(z)	沿着z轴缩放
translate3d(x, y,z)	定义3D转化
translateX(x)	仅用于x轴的值
translateY(y)	仅用于y轴的值
translateZ(z)	仅用于z轴的值
matrixed(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	3D转换矩阵
perspective(n)	定义3D转换元素的透视视图

<body>
   <style>
       body{
           margin: 0;
           padding: 0;
           background-color: #f7f7f7;
       }
       .box{
           width: 200px;
           height: 200px;
           text-align: center;
           line-height: 200px;
           font-size: 24px;
           margin: 100px auto;
           position: relative;
           perspective: 1000px;
           transform-style:preserve-3d ;
           transform: rotateX(-30deg) rotateY(30deg);
       }
       .front, .back, .left, .right, .top, .bottom{
           position: absolute;
           width: 100%;
           height: 100%;
           left: 0;
           top: 0;
           opacity: 0.5;
       }
       .front{
           background-color: pink;
           transform: translateZ(100px);
       }
       .left{
           background-color: green;
           transform: rotateY(90deg) translateZ(-100px);
       }
       .right{
           background-color: red;
           transform: rotateY(-90deg) translateZ(-100px);
       }
       .top{
           background-color: blue;
           transform: rotateX(90deg) translateZ(100px);
       }
       .bottom{
           background-color: yellow;
           transform: rotateX(-90deg) translateZ(100px);
       }
       .back{
           background-color: purple;
           transform: translateZ(-100px);
       }
   </style>
<div class="box">
   <div class="front">front</div>
   <div class="back">back</div>
   <div class="left">left</div>
   <div class="right">right</div>
   <div class="top">top</div>
   <div class="bottom">bottom</div>
</div>
</body>

在这里插入图片描述

2 、过渡属性transition

transition的基本语法：transition：property duration timing-function delay；
CSS的过渡就是平滑地改变一个元素的CSS值，使元素从一个样式逐渐过渡到另一个样式。要实现这样的效果，必须规定两项内容。
1、规定应用过渡的CSS属性名称

2、规定效果时长

css过渡属性

过渡属性是一个复合属性，主要包括以下几个属性

transition-property:指定过渡的CSS名称
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡效果的时间曲线
transition-delay:指定开始出现的延迟时间

<body>
<style>
    .fangk{
        width: 40px;
        height: 40px;
        border: 70px solid #ff6e9b;
        transition:all 3s ease-in 1s;
    }
    .fangk:hover{
        width: 40px;
        height: 40px;
        border: 70px solid #ff6e9b;
        border-radius: 90px;
    }
</style>
    <div class="fangk"></div>
</body>

在这里插入图片描述

3 、 animation动画

CSS3中最后一个动画相关属性就是animation，一个完整的css animation由两部分组成：一组定义动画关键帧和描述该动画的css声明。

1、@keyframes规则

在CSS3中使用@ keyframes规则来创建动画， keyframes可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分绚丽。
@keyframes规则的语法规则如下：

@keyframes animationname{
			keyframes-selector{css-styles;}
}

在上面的语法格式中，animationname表示当前动画名称，它将作为引用时的唯一标识，因此不能为空； keyframes- selector是关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置值是一个百分比、from或者to其中，from和0%效果相同表示动画的开始，to和100% 效果相同表示动画的结束； css-styles定义执行到当前关键帧时对应的动画状态。以上3个属性都是必需的，缺一不可。

2、animation属性

animation-name属性主要用来调用@keyframes定义好的动画
需要特别注意：animation-name调用的动画名需要和"@keyframes“定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果
注意：需要在Chrome和Safari上面的基础上加上-webkit-前缀，Firefox加上-moz-。

animation-duration属性主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需的时间。

animatino-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性的变换速率，就是动画的播放方式。它和transition中的transition-timing-function 中的值一样。

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。

animation-iteration-count属性主要用来定义动画的播放次数，其通常为整数，单页可以为小数，其默认值为1，这意味着动画将从开始到结束只播放一次；如果取值为infinite，动画将无限次的播放。

animation-direction属性主要用来设置动画播放方向，其主要有两个值：normal、alternate
normal是默认值，如果设置为normal时，动画每次循环都是向前播放
另一个是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放

animtion-play-state属性是用来控制元素动画的播放状态。其主要有两个值：running和paused。
paused暂停播放
其中running是其默认值，可以通过该值将暂停的动画重新比方，这里的重新播放不一定是从元素动画的开始播放，而是从暂定的那个位置开始播放。如果暂定了动画的播放。元素的样式将回到最原始设置状态

<body>
    <style>
        body{
            margin: 0;
            padding: 0;
            /* background-color: #f7f7f7; */
        }
        .box{
            width: 400px;
            margin: 100px auto;
            animation: rot 4s linear infinite;
        }
        img{
            width: 100%;
            display: block;
        }
        @keyframes rot{
            0%{
                transform: rotateZ(0deg);
            }
            100%{
                transform: rotateZ(-360deg);
            }
        }
    </style>
    <div class="box">
        <img src="C:\Users\Desktop\bda34.jpg" alt="风车">
    </div>
</body>

在这里插入图片描述
最后总结一下：

animation属性类似于transition，他们都是随着时间改变元素的属性值，其主要区别在于：使用transition属性只能通过指定属性的初始状态和结束状态，然后在两个状态之间进行平滑过渡的方式来实现动画；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果

释~～

关注

2
点赞
踩
2

收藏

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

CSS动画css3实现动画效果常用方法1 、css变形属性2 、过渡属性transitioncss过渡属性3 、 animation动画三级目录css3实现动画效果常用方法1 、css变形属性2 、过渡属性transitiontransition的基本语法：transition：property duration timing-function delay；CSS的过渡就是平滑地改变一个元素的CSS值，使元素从一个样式逐渐过渡到另一个样式。要实现这样的效果，必须规定两项内容。1、规定应用过渡的
复制链接

扫一扫