Web Animation
Examples
Example1
Example1
Hidden
Hidden
Example1
const progressAnimate = keyframes`
0%, 10% {
opacity: 1;
left: 0%;
}
49% {
opacity: 1;
left: 100%;
}
50% {
opacity: 0;
left: 100%;
}
51% {
opacity: 0;
left: -100%;
}
52% {
opacity: 1;
left: -100%;
}
90%, 100% {
opacity: 1;
left: 0%;
}
`;Example2
Example2
content
height
Content
Content
Content
Content
(Hidden)
(Hidden)
Example2
animation or transition ?
- Static variables during animation
- Complicated transformation
- Complicated settings
animation
(On the contrary)
transition
Example2
Example3
Example3
圖
文
const data = [{
id: 1,
cover: 'COVER',
title: 'TITLE',
}, {
id: 2,
cover: 'COVER2',
title: 'TITLE2',
}];Prev
Next
Example3
圖1
文1
Prev
Next
圖1
文1
圖2
文2
目前 index: 0
click Next
Example3
圖2
文2
Prev
Next
圖1
文1
圖2
文2
目前 index: 1
with animation
Example3
圖1
文1
圖2
文2
目前 index: 0
圖1
文1
Prev
Next
click Next
(with animation)
Example3
圖1
文1
圖2
文2
目前 index: 1
圖1
文1
Prev
Next
(with animation)
(opacity: 1)
timestamp: 0s
Example3
圖1
文1
圖2
文2
目前 index: 1
圖1
文1
Prev
Next
(with animation)
(opacity: 0.5)
timestamp: 0.1s
圖2
Example3
圖1
文1
圖2
文2
目前 index: 1
圖1
文2
Prev
Next
(with animation)
(opacity: 0)
(開始跑動畫)
timestamp: 0.2s
圖2
Example3
圖1
文1
圖2
文2
目前 index: 1
圖1
文2
Prev
Next
(with animation)
(opacity: 1)
timestamp: 1s
圖2
Example3
圖1
文1
圖2
文2
目前 index: 1
(剖面圖)
timestamp: 0s
圖
文
圖1
圖2
文2
文1
Example3
圖1
文1
圖2
文2
目前 index: 1
timestamp: 0.1s
圖
文
圖1
圖2
文2
文1
(剖面圖)
Example3
圖1
文1
圖2
文2
目前 index: 1
timestamp: 0.2s
圖
文
圖1
圖2
文2
文1
(剖面圖)
Example3
圖1
文1
圖2
文2
目前 index: 1
timestamp: 1s
圖
文
圖1
圖2
文2
文1
(剖面圖)
To be continued...
Web animation
By Travor Lee
Web animation
Examples
- 130
