transform 、transition、animate动画

1. transition 过渡

-webkit-transition: all .25s ease|linear|ease-in|ease-out|ease-in-out;-moz-transition: all .25s ease|linear|ease-in|ease-out|ease-in-out;-ms-transition: all .25s ease|linear|ease-in|ease-out|ease-in-out;-o-transition: all .25s ease|linear|ease-in|ease-out|ease-in-out;transition: all .25s ease|linear|ease-in|ease-out|ease-in-out;

ease: 默认值，从开始到中止，由快到慢，逐渐变慢。

linear: 元素从开始到中止，速度匀速。

ease-in : 元素越来越快，呈加速状态，这种效果称为渐显效果。

ease-out: 元素越来越慢，呈减速状态，这种效果称为渐隐效果。

ease-in-out: 元素先加速再减速，这种效果称为渐显渐隐效果。

2. transiform 3D/2D转换

2.1 旋转

沿Y轴翻转180°，其内容显示为“反面”。

  transform:rotateY(180deg);-ms-transform:rotateY(180deg); /* Internet Explorer */-moz-transform:rotateY(180deg); /* Firefox */-webkit-transform:rotateY(180deg); /* Safari 和 Chrome */-o-transform:rotateY(180deg); /* Opera */

2.2 翻转

沿Y轴翻转360°，其内容是“正面”。（正负号均可）。

.newsM .look a:hover img{-webkit-transition: all 3s ;-moz-transition: all 3s ;-ms-transition: all 3s ;-o-transition: all 3s ;transition: all 3s ;-webkit-transform: rotateY(-360deg);-moz-transform: rotateY(-360deg);-ms-transform: rotateY(-360deg);-o-transform: rotateY(-360deg);transform: rotateY(-360deg);
}

2.3 放大

放大1.4倍：

.sec5_m_lists ul li a{overflow:hidden;}

.sec5_m_lists ul li:hover a img{width: 100%;-webkit-transform: scale(1.4);-moz-transform: scale(1.4);-ms-transform: scale(1.4);-o-transform: scale(1.4);transform: scale(1.4);
}

3.animate 动画

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

在css样式中，先给元素添加时间，如元素div; 再其后写动画兼容。

如动画theanimation

元素：

div{
animation:theanimation 3s  alternate;-webkit-animation:theanimation 3s  alternate ;-moz-animation:theanimation 3s  alternate ;-o-animation:theanimation 3s  alternate ;-ms-animation:theanimation 3s  alternate ;
}

兼容：

// 动画
@keyframes theanimation{0% {top:0;left:50%;}100% {top:50%;left:50%;}
}
@-webkit-keyframes theanimation{0% {top:0;left:50%;}100% {top:50%;left:50%;}
}
@-moz-keyframes theanimation{0% {top:0;left:50%;}100% {top:50%;left:50%;}
}
@-o-keyframes theanimation{0% {top:0;left:50%;}100% {top:50%;left:50%;}
}
@-ms-keyframes theanimation{0% {top:0;left:50%;}100% {top:50%;left:50%;}
}

关于动画，更详细内容，请看：https://blog.csdn.net/weixin_42220533/article/details/89476267

transform 、transition、animate动画相关推荐

css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画一.总结一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
React-Native中Animate动画使用方法汇总整理（六）之缩放的实现
React-Native中Animate动画使用方法汇总整理(六)之缩放的实现写作时间:2021/9/24 React-Native版本:0.63.2 目标平台:iOS(安卓平台尚未检测) 整理的进 ...
html5鱼游动动画,C3 animation transform鱼游动动画特效
C3 animation transform鱼游动动画特效代码片段: .fishbox{ width: 200px; height: 200px; /*background-color: rgba( ...
animate动画插件的简单运用
animate动画插件的简单运用 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工 ...
animate动画函数的封装方法
废话就不多说马上就开始讲解 1,获取样式首先这里获取的不是行内样式,而是非行内样式,具体可以通过两个属性去获取(为了兼容), 第一个属性是 currentStyle 这个属性是IE的私有属性, 用法 ...
Vue 中使用Animate动画
1.安装 npm install animate.css --save 2.main.js中引入 import animated from 'animate.css' Vue.use(animated ...
React-Native中Animate动画使用方法汇总整理（四）之timing利用easing实现动画的灵活变换
React-Native中Animate动画使用方法汇总整理(四)之timing利用easing实现动画的灵活变换写作时间:2021/9/23 React-Native版本:0.63.2 目标平台: ...
jQuery animate动画效果
jQuery animate动画效果 1.animate动画效果 2.animate回调函数 3.参数为数学表达式形式 4.滑动选项卡 1.animate动画效果 <!DOCTYPE html& ...
React-Native中Animate动画使用方法汇总整理（一）之简单动画的实现
React-Native中Animate动画使用方法汇总整理(一)之简单动画的实现写作时间:2021/9/23 React-Native版本:0.63.2 目标平台:iOS(安卓平台尚未检测) RN ...

transform 、transition、animate动画

关于动画，更详细内容，请看：https://blog.csdn.net/weixin_42220533/article/details/89476267

transform 、transition、animate动画相关推荐

最新文章

热门文章