CSS3 Animation only works on Codepen on iOS Safari - html

Question

For some reason, my CSS3 Transitions are working on every browser except for on Safari (tested on iOS). I believe I've done everything right, but it's just not working.
Codepen: https://codepen.io/KingKundi/pen/RgMmJp
HTML:
/*
==========================
Universal
==========================
*/
* {
font-family: "Heebo";
}
h1 {
font-size: 4rem;
color: #4d4d4d;
}
h4 {
font-size: 2rem;
color: #0072ff;
}
h2 {
font-size: 2.5rem;
color: #0072ff;
padding: 2rem 2rem;
}
p {
line-height: 2rem;
padding: 0 2rem;
font-size: 1.3rem;
color: #4d4d4d;
}
a {
outline: none;
}
.center {
margin-left: auto;
margin-right: auto;
}
.center-text {
text-align: center;
}
.center-v {
display: flex;
align-items: center;
}
/*
==========================
Home
==========================
*/
.hero {
background-color: #ffffff;
}
.intro {
padding-top: 5rem;
}
.img-circle {
border-radius: 50%;
}
.hero-link {
color: #000000;
font-size: 3rem;
}
.fa {
font-size: 5.5rem;
padding: 0.5rem 2rem;
color: #4d4d4d;
}
.fa:focus {
color: #4d4d4d;
}
.fa:hover {
color: #0072ff;
}
.fa-home {
font-size: 3rem;
position: fixed;
}
.fa-project {
color: #ffffff;
z-index: 11;
font-size: 4rem;
position: absolute;
bottom: 0;
right: 0;
}
/*
==========================
Project tiles
==========================
*/
#media (max-width: 1000px) {
#project-break {
width: 100%;
margin-left: 0;
}
}
.tile {
height: 27rem;
width: 100%;
margin:10px;
display:inline-block;
background-size:cover;
position:relative;
cursor:pointer;
-webkit-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
overflow:hidden;
color:white;
}
.tile img {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:0;
-webkit-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.tile .text {
z-index: 11;
position:absolute;
padding:30px;
height:calc(100% - 60px);
}
.tile h1 {
color: #ffffff;
font-size: 1.75rem;
font-weight:300;
text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.tile p {
color: #ffffff;
font-weight: 300;
margin: 20px 0 0 0;
-webkit-transform: translateX(-200px);
-o-transform: translateX(-200px);
-moz-transform: translateX(-200px);
-ms-transform: translateX(-200px);
transform: translateX(-200px);
transition-delay: 0.2s;
}
.animate-text {
opacity:0;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.tile:hover {
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.tile:hover img {
opacity: 0.2;
}
.tile:hover .animate-text {
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity:1;
}
/*
.tile:hover span {
opacity:1;
transform:translateY(0px);
-webkit-transform:translateY(0px);
-o-transform:translateY(0px);
-moz-transform:translateY(0px);
-ms-transform:translateY(0px);
}
*/
#media (max-width: 550px) {
.tile p {
font-size: 1.1rem;
line-height: 1.5rem;
}
}
#media (max-width: 320px) {
.tile p {
font-size: 0.9rem;
line-height: 1.5rem;
}
}
.fa-fade {
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.pomodoro {
background-image: url("assets/pomodoro-site.png");
background-position: center;
}
.duelr {
background-image: url("assets/duelr-site.png");
background-position: center;
}
.grt-bot {
background-image: url("assets/grt-site.png");
background-position: center;
}
.pomodoro:after,
.duelr:after,
.grt-bot:after {
content: " ";
z-index: 10;
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
}
p > a {
color: #ffffff;
}
p > a:hover {
color: #0072ff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.fontawesome.com/7743338bf9.js"></script>
<link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet">
<link rel="stylesheet" href="static/normalize.css">
<link rel="stylesheet" href="static/skeleton.css">
<link rel="stylesheet" href="static/main.css">
<link rel="icon" href="static/assets/favicon.png">
</head>
<body>
<div class="hero center-text">
<div class="container">
<section class="intro twelve columns">
<div class="row">
<h2>projects</h2>
<div class="row">
<div class="one-half column" id="project-break">
<div class="tile u-max-full-width pomodoro">
<div class="text center-text">
<h1>Pomodoro</h1>
<p class="animate-text">
Pomodoro is a productivity oriented web application which incentivizes the<br>Pomodoro Technique.
</p>
<p class="animate-text">
Built with: Django/Python, HTML5, CSS, JavaScript, jQuery, and AJAX.
</p>
</div>
<i class="fa fa-github fa-project animate-text fa-fade" aria-hidden="true"></i>
</div>
</div>
<div class="one-half column" id="project-break">
<div class="tile u-max-full-width duelr">
<div class="text center-text">
<h1>Duelr</h1>
<p class="animate-text">
An online multiplayer 1v1 fighting game.
</p>
<p class="animate-text">
Built with: JavaScript, Node.js, Express.js, Socket.io, HTML5, CSS, and Phaser.
</p>
</div>
<i class="fa fa-github fa-project animate-text fa-fade" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="row">
<div class="twelve columns">
<div class="tile u-max-full-width center grt-bot">
<div class="text center-text">
<h1>GRT Messenger Bot</h1>
<p class="animate-text">
The Grand River Transit Bot is a service published on Facebook Messenger which yields real-time bus information to users through HTTP requests.
</p>
<p class="animate-text">
Built with: JavaScript, Node.js, Express.js, and API.ai.
</p>
</div>
<i class="fa fa-github fa-project animate-text fa-fade" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="row">
<h2>contact</h2>
</div>
</div>
</div>
<script src="static/app.js"></script>
</body>
</html>

Answer 1

I don't know about transition on click but I do get a transition of sliding project description from left when I hover over the project tile.
Test and works on MacOS Safari and iOS Safari as well, but since it's a touch environment the transition doesn't happen unless you click on it.