过渡和动画的基本知识

最新推荐文章于 2024-06-24 22:43:52 发布

xjt_3852

最新推荐文章于 2024-06-24 22:43:52 发布

阅读量2.5k

点赞数

文章标签：动画 wpf tv

本文链接：https://blog.csdn.net/XJT2242746673/article/details/121984206

版权

大家好，今天我们来学习过渡和动画相关的知识。

一、过渡

1.什么是过渡？
概念 :就是指元素从一个状态变为另一个状态的过程。

2.如何实现过渡？
通过 transition 属性来指定，它的语法格式为:
transition :过渡属性 持续时间 运动曲线 延迟时间:

3.对于过渡而言，我们可以使用 transition 属性来简写，也可以把这个属性分开。
-transition-property:指定要用于过渡的属性名称，如 width, height, background
-transition-duration:过渡持续时间 ，单位是秒。
-transition-timing-function:过渡的运行曲线，默认是 ease
-transition-delay:延迟执行时间，单位是秒。

4. 注意:添加过渡效果的代码需要放在你想要进行过渡的元素上。简单地说，就是希望那个元素有过渡效果就把代码加上。

5. 如果希望元素的多个属性都具有过渡的效果，那么我们就可以把过渡属性设为 all 即可。

6.运行曲线有哪些？
-ease :默认值，逐渐慢下来
-linear :匀速运动
- ease-in: 加速
- ease-out: 减速
- ease-in-out:先加速后减速

二、进度条

这节没有多余的知识点，只需要一段代码就能将其呈现出来；

 <style>
        .box {
            width: 150px;
            height: 15px;
            border: 1px solid #f00;
            border-radius:  5px;
        }
        .bar {
            width: 0%;
            height: 100%;
            background-color: red;
            border-radius: 5px;
            transition: width 1s ease-out;

        }
        .box:hover .bar {
            width: 90%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="bar"></div>

三、转换

在CSS中，转换用的非常多，但它主要用于图形的旋转和缩放。

（一）转换

.在CSS 中提交了元素转换的操作功能，通过使用 transform 来实现，可以实现元素的
- 位移 : transform: translate()
- 旋转 : transform: rotate()
- 缩放 : transform: scale()

位移 :使用 translate() 来进行指定，它需要通过 x坐标和 y坐标来确定移动的方向。
语法格式有 :
transform: translate(x,y); // 在x坐标和 y坐标上移动
transform: transformX(n); // 只在 x坐标上移动
transform: transformY(n); // 只在 y坐标上移动

注意 :
1. 当使用translate(x,y)时，x 和y 都可以指定正值或负值
如果x 的值为正值，则向右移动，负值向左移动
如果y 的值是正值，则向下移动，负值向上移动。
2. x和y轴的值要带单位，一般使用像素（px)

（二）转换之旋转

在CSS中还提供了元素旋转的功能，通过使用 rotate()来实现，进行旋转时需要指定旋转的角度。
而所使用角度的单位是 deg
语法格式为:
transform:rotate(数字deg);

注意 : 默认情况下旋转是以元素的中心位置为旋转点来旋转的，如果想指定旋转的中心点的位置，可以使用 transform

文字可能显得太过苍白无力，下面一段代码奉上。

<style>
    .box {
        position:absolute;
        left: 200px;
        top:200px;
        width: 200px;
        height: 200px;
        background-color: blueviolet;

        yransform-origin: 10px 10px;
        transform: rotate(45deg);
    }
</style>

  <div class="box"></div>

（三）转换之缩放

缩放使用 transform: scale() 来实现，
语法格式为:
transform: scale(x,y)

它有以下几种书写方式:
- transform: scale(1,1) :宽和高都放大一倍，相当于没有放大
- transform: scale(2,2) :宽和高都放大了两倍
- transform: scale(2)   :只有一个参数，第二个参数则与第一个参数一样，相当于scale （2，2）
- transform: scale(0.5,0.5)  :缩小

x和y 的取值说明 :
如果值为 1 表示不放大也不缩小
如果值大于 1 表示放大
如果值小于 1 表示缩小

x和y的值是原大小的倍数

了解：text-align:水平居中      line-height:垂直居中，指定为高的值

四、动画

动画也是CSS3中提供的一个功能，它和过度最大的区别是:动画可以实现更多变化，更多
要想使用动画，那么首先浏览器必须是高版本的。

首先使用动画之前，需要通过 @keyframe 来定义动画，定义好动画后，通过 animation 属性来指定动画；

定义动画时，需要告诉它这个动画将如何完成。
1. 开始状态 form， 也可以使用百分比来指定。
2. 结束状态 to

注意: 要想元素具有动画效果，除了定义好、动画并运用外，还需要对这个元素进行绝对定位。

animation是动画的简写方式，它里面有很多的属性。它的语法格式为 :
animation :动画的名称 持续时间 动画曲线 延迟时间 动画执行次数 动画的状态

动画的名称-- animation-name
持续时间-- animation-duration
动画曲线-- animation-timing-function
延迟时间-- animation-delay
是否可以逆向播放  -- animation-direction:
              默认是" normal ",动画执行到最后会直接加载到开始处
              alternate 逆播放 ，动画执行到最后会反着播放。

动画执行次数-- animation-iteration-count :
             次数可以是整数，也可以是 infinite 表示一直循环

动画的状态-- animation-fill-mode:
       有两个值可以指定 :保持forwards,回到起始 backwards

规定动画是否正在运行或暂停 -- animation-play-state:
这个需要单独使用，有两个值 :
- running:运行状态，默认值
- paused: 暂停状态

好了，今天的过渡和动画的基本知识就讲完了，希望能给你们提供些许帮助，我们下次再见！