.dade_sf{animation-name: scaleDraw; /*关键帧名称*/animation-timing-function: ease-in-out; /*动画的速度曲线*/animation-iteration-count: infinite; /*动画播放的次数*/animation-duration: 2s; /*动画所花费的时间*/}@keyframes scaleDraw {/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/0% {transform: scale(1); /*开始为原始大小*/}25% {transform: scale(1.05); /*放大1.1倍*/}50% {transform: scale(1);}75% {transform: scale(1.05);}
移动transform:translateX(100px) /*向右边移动100px*/transform:translateX(-100px) /*向左边移动100px*/transform:translateY(100px)/*向下边移动100px*/transform:translateY(-100px) /*向上边移动100px*/transform:translate(100px,-100px)/*向右上角移动100px*/transform:translate(-100px,100px) /*向左下角移动100px*/
旋转transform:rotate(50deg); /*设置为平面旋转（二维旋转）50度*/transform:rotateX(360deg) /*以X轴为旋转中心旋转360度（三维旋转）*/transform:rotateY(180deg) /*以Y轴为旋转中心旋转180度（三维旋转）*/transform:rotateZ(90deg) /*以Z轴为旋转中心旋转90度（三维旋转）效果和rotate一样*/transform:rotateX(45deg)rotateY(45deg)rotateZ(45deg) /*向X、Y、Z方向各偏45度*/transform:scale(0.5) rotateY(45deg) rotateZ(45deg); /*缩小0.5倍，并且旋转Y和Z轴45度*/
大小tranform:scale(0.5)/*整体缩小到原来的一半*/tranform:scale(2) /*整体放大到原来的一半*/tranform:scaleX(0.5)/*宽缩小到原来的一半*/tranform:scaleX(2) /*宽放大到原来的一半*/tranform:scaleY(0.5)/*高缩小到原来的一半*/tranform:scaleY(2)/*高放大到原来的一半*//*好像看不出变化*/tranform:scaleZ(0.5)tranform:scaleZ(2)
倾斜属性transform:skew(30deg,45deg) /*向x轴偏移3度，向y轴偏移45度*/transform:skewX(45deg);/*向X轴倾斜45度角，向左边倾斜45度*/transform:skewY(90deg);/*向Y轴倾斜90度角,相对于是靠右倾斜，直到于y轴成为一条线*/
如果觉得《css图片放大缩小动画》对你有帮助，请点赞、收藏，并留下你的观点哦！
