デモ
See the Pen animation by logsuke (@design-list) on CodePen.
コード
<a href="#" class="button1">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button1 = document.querySelector(".button1");
button1.animate(
{
transform: [
"translateX(-25px)",
"translateX(0px)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button2">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button2 = document.querySelector(".button2");
button2.animate(
{
transform: [
"translateX(25px)",
"translateX(0px)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button3">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button3 = document.querySelector(".button3");
button3.animate(
{
transform: [
"translateY(25px)",
"translateY(0px)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button4">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button4 = document.querySelector(".button4");
button4.animate(
{
transform: [
"translateY(-25px)",
"translateY(0px)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button5">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button5 = document.querySelector(".button5");
button5.animate(
{
transform: [
"rotateX(180deg)",
"rotateX(0deg)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button6">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button6 = document.querySelector(".button6");
button6.animate(
{
transform: [
"rotateY(180deg)",
"rotateX(0deg)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button7">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button7 = document.querySelector(".button7");
button7.animate(
{
transform: [
"rotateZ(180deg)",
"rotateZ(0deg)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button8">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button8 = document.querySelector(".button8");
button8.animate(
{
transform: [
"rotateZ(-180deg)",
"rotateZ(0deg)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button9">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button9 = document.querySelector(".button9");
button9.animate(
{
transform: [
"translate(-25px,-25px)",
"translateX(0px)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button10">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button10 = document.querySelector(".button10");
button10.animate(
{
transform: [
"translate(-25px,25px)",
"translateX(0px)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button11">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button11 = document.querySelector(".button11");
button11.animate(
{
transform: [
"translate(25px,-25px)",
"translateX(0px)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button12">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button12 = document.querySelector(".button12");
button12.animate(
{
transform: [
"translate(25px,25px)",
"translateX(0px)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button13">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button13 = document.querySelector(".button13");
button13.animate(
{
transform: [
"scale(.8)",
"scale(1)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button14">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button14 = document.querySelector(".button14");
button14.animate(
{
transform: [
"translateY(0px)",
"translateY(-10px)",
"translateY(0px)",
"translateY(-5px)",
"translateY(0px)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button15">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button15 = document.querySelector(".button15");
button15.animate(
{
transform: [
"translateX(0px)",
"translateX(-10px)",
"translateX(0px)",
"translateX(-5px)",
"translateX(0px)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button16">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button16 = document.querySelector(".button16");
button16.animate(
{
transform: [
"translateX(0px)",
"translateX(10px)",
"translateX(0px)",
"translateX(5px)",
"translateX(0px)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button17">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button17 = document.querySelector(".button17");
button17.animate(
{
transform: [
"rotate(0deg)",
"rotate(10deg)",
"rotate(0deg)",
"rotate(-5deg)",
"rotate(0deg)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);<a href="#" class="button18">button</a>const option = {
fill: 'forwards',
iterationStart: 0,
duration: 1000,
// direction: "normal",
easing: "ease-in-out",
// composite: "replace"
delay: 1000,
// endDelay: 3000,
//表示用
iterations: 'Infinity',
};
const button18 = document.querySelector(".button18");
button18.animate(
{
filter: [
"blur(10px)",
"blur(0px)"
],
opacity: [
"0",
"0.8",
"1"
]
},
option
);
