我们眼前所看到图像正在以每秒60次的频率刷新,由于刷新频率很高,因此你感觉不到它在刷新。而动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果,这个变化要以连贯的、平滑的方式进行过渡。
transition: property duration timing-function delay
div{
height: 200px;
width: 200px;
background: green;
transition: background 2s ease,transform 2s ease-in 1s;
}
div:hover{
transform:rotate(180deg) scale(.5);background:red
}
transition的优点在于简单易用,但是它有几个很大的局限。
(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
animation: name duration timing-function delay iteration-count direction;
在网页加载时自动发生
#myDiv {
width:200px;
height:200px;
background:green
}
.play {
animation: fancy 2s ease infinite alternate;
/* animation: fancy 2s ease alternate forwards; */
}
@keyframes fancy {
0% { transform: none; background:green;}
40% { transform: scale(0.75) rotate(90deg); }
100% { transform: scale(0.5) rotate(180deg);background:red }
}
增加restart按钮
@keyframes fancy1 {
0% { transform: none;background:green }
40% { transform: scale(0.75) rotate(90deg); }
/* 45% {background:blue} */
100% { transform: scale(0.5) rotate(180deg);background:red }
}
.restart {
animation: fancy1 2s ease infinite alternate;
}
function restart(){
if (myDiv.classList.contains('play')) {
myDiv.className = 'restart';
}else {
myDiv.className = 'play';
}
}
增加停止按钮
.pause {
animation-play-state: paused;
}
function pause(){
if (myDiv.classList.contains('play')) {
myDiv.className = 'pause play';;
}else {
myDiv.className = 'pause restart';
}
}
*2倍速
.faster{
animation: fancy 1s ease infinite alternate;
}
function faster(){
if (myDiv.classList.contains('play')) {
myDiv.className = 'faster';
}else {
myDiv.className = 'faster restart';
}
}
如果需要多个动画需要随时的暂停,播放,反向播放,动态改变播放速率,监听到动画的完成和取消,需要用js来为css animation增加不同的样式从而改变动画,会让css文件和js文件太过于“笨重”
Web Animations api为开发者打开浏览器的动画引擎,让开发者可以通过JavaScript进行操作。该API旨在成为CSS动画和CSS过渡的实现的基础,并为未来的动画效果留下了空间。它是支持Web的动画最高效的方法之一,让浏览器可以自己进行内部优化而不需要hacks,强制或Window.requestAnimationFrame()。
通过Web Animations API,我们可以将交互式动画从样式表移动到JavaScript,将表现与行为分开。我们不再需要依赖dom-heavy的技术,例如编写CSS属性和将类作用于元素以控制播放方向。与纯粹的声明性CSS不同,JavaScript还允许我们动态地将值从属性设置为持续时间。
其核心在于提供了:Element.animate(frames, timing);
两个参数
1.关键帧对象数组frames[],对应CSS3中的@keyframes,每一帧的描述与css3极其类似,但它不需要明确告知动画中每个键出现的百分比。它会根据您给出的键数自动将动画分成相等的部分。也可以直接在对象中指定偏移量,CSS中的百分比偏移更改为offset从0到1的十进制值
2.时间控制timing,包括有duration持续时间、iterations执行次数、direction动画方向、easing缓动函数等属性
var options = {
iterations: Infinity, // 动画的重复次数,默认是 1
iterationStart: 0, // 用于指定动画开始的节点,默认是 0
delay: 0, // 动画延迟开始的毫秒数,默认 0
endDelay: 0, // 动画结束后延迟的毫秒数,默认 0
direction: 'alternate', // 动画的方向 默认是按照一个方向的动画,alternate 则表示交替
duration: 700, // 动画持续时间,默认 0
fill: 'forwards', // 是否在动画结束时回到元素开始动画前的状态
easing: 'ease-out', // 缓动方式,默认 "linear"
};
pause() – 暂停动画
play() – 播放动画
reverse() – 反向播放
finish() – 立即结束动画
cancel() – 取消动画并回到初始状态
playbackRate – 播放速度(负数的话将导致动画反向运行)
var myDiv = document.getElementById('myDiv');
var keyframes=[
{transform: 'translateX(0)' },
{transform: 'translateX(500px)'}
]
var timing={
duration: 2000,
// iterations: Infinity,
direction: 'alternate'
}
let myAnimation=myDiv.animate(keyframes,timing);
// 播放动画
function play(){
myAnimation.play();
}
// 暂停动画
function pause(){
myAnimation.pause();
}
// 反向播放
function reverse(){
myAnimation.reverse();
}
// 立即结束动画
function finish(){
myAnimation.finish();
}
// 取消动画并回到初始状态
function cancel(){
myAnimation.cancel();
}
// 2倍速
function faster(){
myAnimation.playbackRate = 2;
}
// 反向运行动画
function back(){
myAnimation.playbackRate = -1;
}
// 设置当前动画播放的毫秒数
function currentTime(){
//currentTime返回动画当前所在的毫秒数,读/写
myAnimation.currentTime=0;
}
spinnerAnimation.addEventListener('finish', function() {
// Animation has completed or .finish() has been called.
doSomething();
});
spinnerAnimation.addEventListener('cancel', function() {
// Animation has been canceled.
doSomething();
});
可以引进 polyfill (web-animations-js),但也只能兼容到ie>=11
移动端浏览器,Android 5.0以上的Android Browser和Chrome for Android本身就已经支持WAAPI了,加上Polyfill之后,iOS的Safari也支持了。
1,在css animation中animation-timing-function适用于关键帧之间
2,在web animation中animation-timing-function适用于整个动画过程
3,如果想要在web animation中animation-timing-function也适用于关键帧之间,可以在关键帧上加上easing属性(可以不同)
Try to animate transform and opacity
对于动画的每一帧,浏览器都要重新计算元素的形状位置(reflow),把新状态渲染出来(repaint),再显示到屏幕上,而transform和opacity这两个属性有其特殊性:
1,does not affect the document’s flow,(不影响布局)
2,does not depend on the document’s flow,(不受布局影响)
3,does not cause a repaint.(变化不会导致其它部分需要repaint)
所以浏览器能百分百肯定transform和opacity的变化与布局无关,不受布局影响,其变化也不会影响现有布局
CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画
Vue.js中的元素动画或页面跳转动画有多种实现方式比如:1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如:Animate.css3、在构子函数中操作DOM4、使用第三方Js动画库如:Velocity.js。
尽量多的列举出新手引导动画的实现方式, 昨天稍微总结了一下, 实现了4种.源码在最后,如果想直接看结果的,可以拉到最后去看.这里假设所有的弹出层都是基于页面上原有的元素
在项目中我们可能对动画进行锁帧,帧率可能是 60 或者 30,如果我们想保证渲染不抖动,在匀速直线运动中,我们尽量保证我们设置的速度要是帧率的倍数,或者保证平均每帧移动的像素点是一样的
常用的CSS动画效果,在实际开发中经常需要用到移动、大小、闪烁、渐显、渐隐等动画效果,这篇文章就整理了些常见的动画效果分享给大家,一遍收藏使用。
创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可
transition是css最简单的动画。 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!!但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? transition可以做到。
制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢
这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。HTML结构:4种loading预加载动画的HTML结构分别如下
js提供的钩子动画before-enter、enter、after-enter,用这种方法写,所有的动画都写在了组件里,外部只需要调用这个fade组件就可以了,也不需要全局去写一些样式了,这种动画的封装是比较推荐的一种动画封装,因为它可以把所有动画的实现完整的封装在一个组件中
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!