CSSのアニメーションに詳しい方いらっしゃいませんか？

前提・実現したいこと

画面の右下から左に向かってポップメッセージのようなものが出てくる動きのあるアニメーションを作ってます
下記ソースで、赤い部分に入ってない部分は非表示の状態、赤いエリアに入ったら表示する状態にしたいです
詳しい方教えて下さい

HTML
1<div style="width:70%;height:100%;background-color:red;position:relative">
2<div class="rolling" style="background-color:blue;position:absolute;right:0%;bottom:0%;width:70%;height:10%;z-index:999999999999999999999999999">
3<div style="height:70%;height:70%">こんにちは</div>
4</div>
5</div>

CSS
1<style>
2body,html{
3       height:100%;
4       width:100%;
5}
6@keyframes roll {
7    from {
8        -webkit-transform: translateX(105%);
9    }
10    25%{
11        -webkit-transform: translateX(70%);
12    }
13    35%{
14        -webkit-transform: translateX(70%);
15    }
16    45%{
17        -webkit-transform: translateX(70%);
18    }
19    60%{
20        -webkit-transform: translateX(80%);
21    }
22    70%{
23        -webkit-transform: translateX(90%);
24    }
25    to{
26        -webkit-transform: translateX(105%);
27    }
28}
29    .rolling{
30       -webkit-transform: translateX(105%);
31       animation: roll 5s linear 1;
32}
33</style>

行動規範の内容に同意します

回答1件

ベストアンサー

overflow:hiddenでいいんじゃ？

html
1<div style="overflow:hidden;width:70%;height:100%;background-color:red;position:relative">
2  <div class="rolling" style=" background-color:blue;position:absolute;right:0%;bottom:0%;width:70%;height:10%;z-index:999999999999999999999999999">
3    <div style="height:70%;height:70%">こんにちは</div>
4  </div>
5</div>