css呼吸效果实现

实现一个图片有规律的大小变化，呈现呼吸效果，怎么用CSS实现这个呼吸效果呢

一.实现

CSS实现动态效果可以使用动画( animation)来属性实现，放大缩小效果可以用transform: scale来实现，在这基础上有了动画，就可以设置一个在几秒内的呼吸效果了，然后设置播放次数为infinite（无限）,就可以的到想要的效果了.animation 属性是一个简写属性，它有如下几个动画属性

1.animation属性 

animation-name：指定要绑定到选择器keyframe的关键帧的名称(eg:testAnimation)
animation-duration：动画指定需要多少秒或毫秒完成(eg：2s)
animation-timing-function：设置动画将如何完成一个周期（动画的速度曲线）   ,取值如下：

linear	动画从头到尾的速度是相同的。
ease	默认，动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps(int,start|end)	指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下： start：表示直接开始 end：默认值，表示戛然而止
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值

animation-delay：设置动画在启动前的延迟间隔(eg：2s)
animation-iteration-count：定义动画的播放次数

n	一个数字，定义应该播放多少次动画
infinite	指定动画应该播放无限次（永远）

animation-direction：指定是否应该轮流反向播放动画(先执行一遍动画，然后再反向执行一遍动画)

2.语法  

animation: name duration timing-function delay iteration-count direction;

二.案例演示

1.CSS代码

	.test{
	   width: 200px;
	   height: 200px;
	   background-image:url("../src/assets/test.png");
	   background-repeat: no-repeat;
	   background-size: contain;
    
       //可以直接使用animation设置
	   animation: testAnimation 2s ease-in-out infinite;
       //也可以单独使用对应的属性设置
       animation-name: testAnimation;
       animation-duration: 3s;
       animation-timing-function: ease-in-out;
       animation-iteration-count: infinite;
	}
    @keyframes testAnimation {
    	0%{
    		transform: scale(0.88);
          }
        50%{
            transform: scale(1);
          }
         100%{
            transform: scale(0.88);
          }
     }复制

2.效果展示

好了，一个简单的呼吸效果就做好了