css несколько разных transition

272

26 сентября 2017, 06:25

body, html, h1, p { 
  margin: 0; 
  padding: 0; 
} 
 
main { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
} 
 
.circlewrap { 
  margin-top: 20px; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: start; 
      -ms-flex-pack: start; 
          justify-content: flex-start; 
  -webkit-box-orient: horizontal; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: row; 
          flex-direction: row; 
  width: 90%; 
  height: 100px; 
} 
.circlewrap .text { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: column; 
          flex-direction: column; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  text-align: right; 
  margin-right: 20px; 
} 
.circlewrap .text h1 { 
  color: red; 
  font-size: 1.5em; 
  padding: 6px; 
} 
.circlewrap .text p { 
  font-size: 1em; 
  padding: 6px; 
} 
.circlewrap .circle { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  z-index: 1; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
  margin-left: -3px; 
} 
.circlewrap .circle .c-cont { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
  width: 100px; 
  height: 100px; 
  border: 3px solid #c2c2c2; 
  border-radius: 53px; 
} 
.circlewrap .circle .c-cont img { 
  width: 60px; 
  height: 60px; 
} 
.circlewrap .circle:hover { 
  cursor: pointer; 
} 
.circlewrap .circle:hover + .h-wrap { 
  width: 600px; 
  -webkit-box-shadow: 0px 0px 0px 3px #f00; 
          box-shadow: 0px 0px 0px 3px #f00; 
  -webkit-filter: opacity(1); 
          filter: opacity(1); 
} 
.circlewrap .h-wrap { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  width: 100px; 
  border-radius: 50px; 
  margin-left: -103px; 
  -webkit-filter: opacity(0); 
          filter: opacity(0); 
  -webkit-transition: all 0.5s ease-in; 
  transition: all 0.5s ease-in; 
} 
.circlewrap .h-wrap .hidden { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
      -ms-flex-pack: center; 
          justify-content: center; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
  margin-left: 120px; 
} 
.circlewrap .h-wrap .hidden p { 
  margin: 6px; 
  padding: 6px; 
}

<!DOCTYPE html> 
<html lang="ru"> 
<head> 
    <title>List</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" type="text/css" href="css/style.min.css"> 
    <script src="js/jquery-3.2.1.min.js"></script> 
</head> 
<body> 
    <main> 
        <div class="circlewrap"> 
            <div class="text"> 
                <h1>Анализ конкурентной среды</h1> 
                <p>Проводится детальный анализ ТОПА по продвигаемым запросам и сайтам конкурентов</p> 
            </div> 
            <div class="circle"> 
                <div class="c-cont"><img src="img/x1.png"></div> 
            </div> 
            <div class="h-wrap"> 
                <div class="hidden"> 
                    <p>На данном этапе SEO специалисты анализируют сайт конкурентов по продвигаемым запросам находящимся в ТОПЕ поисковых систем. После чего составляется план работ по продвижению.</p> 
                </div> 
            </div> 
        </div> 
    </main> 
</body> 
</html>

Есть две большие проблемы, которые пока не придумал как решить:

модуль не центрирован, и я не пойму как сделать так, чтобы при любом раскладе иконка была в центре, а выходящее меню справа не сдвигала его влево. (на данный момент центрирование поставлено с левого края, так что проблема не так заметна в примере)
при выводе блока справа текст появляется слишком узкий, выходя за рамки в начале и растягиваясь нормально потом. Есть ли способ сделать вывод текст слева-направо постепенно?