I think that when the page is loaded, the cold word slides into the animation from the bottom of the screen. I just come into contact with Vue, and don"t know how to write
. 
<template>
<div>
<p id="cold">
<p id="hot">
</div>
</template>
<script>
export default{
name: "Home",
data () {
return {
show: true
}
},
}
</script>
<style lane="scss">
-sharpcold{
position: absolute;
top: 45%;
left: 5%;
}
-sharphot{
position: absolute;
top: 0;
right: 5%;
}
</style>