在CSS动画之前使元素不可见

我最近开始尝试学习CSS动画，并尝试制作一个类似打字机的效果。虽然效果正常，但我想知道如何在页面加载几秒钟后使动画开始，但仍然使文本显示为不可见（宽度：0）。我尝试了几件事，包括制作两倍长的第一个动画，但在50%关键帧标记之前表示宽度为零，但是这会使动画非常不稳定，并从文本的一部分开始。我还尝试将不透明度设置为0，直到第一个关键帧，但这似乎也不起作用。任何帮助都将不胜感激

.type1{
宽度：30em；
空白：nowrap；
溢出：隐藏；
-webkit动画：键入3s步骤（40，结束）；
-webkit动画延迟：3s；
动画：键入3s步骤（40，结束）；
动画延迟：3s；
}
@关键帧类型{
从{宽度：0；}
}
@-webkit关键帧类型{
从{宽度：0；}
}
.类型2{
宽度：20em；
空白：nowrap；
溢出：隐藏；
-webkit动画：键入2s步骤（40，结束）；
-webkit动画延迟：4.8秒；
动画：键入2s步骤（40，结束）；
动画延迟：4.8秒
}
@关键帧类型{
从{宽度：0；}
}
@-webkit关键帧类型{
从{宽度：0；}
}

提姆
我是苹果公司现任首席执行官
我喜欢电影

document.onreadystatechange=function（）{
var state=document.readyState
如果（状态==“完成”）{
$（“.type1”）.addClass（“文本动画”）.removeClass（“隐藏”）；
$（“.type2”）.addClass（“文本动画”）.removeClass（“隐藏”）；
}
}

.type1{
宽度：20em；
空白：nowrap；
溢出：隐藏；
}
.隐藏{
显示：无！重要；
}
.文字动画{
-webkit动画：键入3s步骤（40，结束）；
-webkit动画延迟：0秒；
动画：键入3s步骤（40，结束）；
动画延迟：0秒
}
@关键帧类型{
从{
宽度：0
}
}
@-webkit关键帧类型{
从{
宽度：0
}
}
.类型2{
宽度：20em；
空白：nowrap；
溢出：隐藏；
}
@关键帧类型{
从{
宽度：0
}
}
@-webkit关键帧类型{
从{
宽度：0
}
}

提姆
我是苹果公司现任首席执行官
我喜欢看电影